效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<meta name="referrer" content="no-referrer" />
<title>demo</title>
</head>
<body>
<div class="loading_box">
<div class="loading_info">
<div class="red_bar"></div>
</div>
</div>
</div>
<style>
html, body{
margin: 0;
padding: 0;
}
.loading_box{
position: relative;
padding: 36px;
box-sizing: border-box;
background-color: rgb(39, 38, 38);
}
.red_bar {
background-color: #8f2a29;
position: absolute;
height: 5px;
width: 50px;
left: 10px;
bottom: 0;
animation: red_bar1 3000ms linear infinite alternate;
}
@keyframes red_bar1 {
to {
transform: translateX(500%);
opacity: 0.1;
}
}
</style>
</html>
标签：css3,box,渐隐,color,bar1,js,html,red From： https://www.cnblogs.com/nangras/p/17774259.html