css3线条进程动画
2018-08-21 本文已影响0人
张冬昱
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
{
width: 1349px;
height: 4px;
animation-name: shake;
animation-delay: 1s;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes shake
{
0%{
width:0;
}
25%{
width:25%;
background:green;
}
50%{
width:50%;
background:darkcyan;
}
75%{
width:75%;
background:cadetblue;
}
100%{
width:100%;
background:darkblue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果展示
