前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端ABC-animation动画发光进度条</title>
<style type="text/css">
.main-body{
width: 1000px;
margin: 100px auto;
}
.progress-bar{
height: 4px;
background: #ccc;
}
.progress-bar .status-point{
width: 20px;
height:20px;
border-radius: 50%;
background: #007ed8;
float: left;
margin-right:140px;
margin-top: -8px;
}
.progress-bar .status-point:last-child{
float: right;
margin-right:0;
}
.progress-bar .status-point.active{
animation: bling-bling 5s infinite;
}
@keyframes bling-bling {
0%{
box-shadow: 0 0 0 #005b96;
}
50%{
box-shadow: 0 0 20px #005b96;
}
100%{
box-shadow: 0 0 0 #005b96;
}
}
</style>
</head>
<body>
<div class="main-body">
<div class="progress-bar">
<span class="status-point"></span>
<span class="status-point"></span>
<span class="status-point"></span>
<span class="status-point"></span>
<span class="status-point active"></span>
<span class="status-point"></span>
<span class="status-point"></span>
</div>
</div>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 用animation动画写发光的进度条