开机动画

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background:#222;
}
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#container{
position:absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
li{
float:left;
font-size:30px;
margin-right:5px;
animation: wenzi 0.5s infinite alternate;
}

/*动画设置*/
@keyframes wenzi {
0% {
transform: translateY(0);
}

100%{
transform: translateY(20px);
}
}

</style>
</head>
<body>
<ul id="container">
<li>L</li>
<li>o</li>
<li>a</li>
<li>d</li>
<li>i</li>
<li>n</li>
<li>g</li>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>

<script>
var lis = document.querySelectorAll('li');

lis.forEach(function(li, key){
li.style.color = 'rgb('+rand(150,255)+','+rand(150,255)+','+rand(150,255)+')';
//控制每一个li的动画延时 0 0 1 40 2 80
li.style.animationDelay = key * 40 + 'ms';
});

//返回一个 从 m 到n的随机值
function rand(m,n) {
return Math.ceil(Math.random() * (n-m+1)) + m - 1;
}
</script>
</body>
</html>

posted @ 2020-10-06 20:40  13522679763-任国强  阅读(219)  评论(0)    收藏  举报