效果图：
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>开机动画2D</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
position: relative;
background: #ccc;
}
#wrap > .inner{
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform:translate3d(-50%,-50%,0);
white-space:nowrap;
}
#wrap > .inner > span{
position: relative;
/*animation:move 1s linear infinite alternate;*/
}
@keyframes move{
from{
top:0px;
}
to{
top: -20px;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
<span>行</span>
<span>至</span>
<span>水</span>
<span>穷</span>
<span>处</span>
<span>坐</span>
<span>看</span>
<span>云</span>
<span>起</span>
<span>时</span>
</div>
</div>
<script>
window.onload=function(){
let spanNodes = document.querySelectorAll("#wrap > .inner > span")
let colors = ["red", "orange","yellow","green","cyan","blue","violet",'purple',"pink","white"]
for(let i = 0; i < spanNodes.length; i++ ){
spanNodes[i].style.animation = "move .3s "+(i*50)+"ms linear infinite alternate"
spanNodes[i].style.color = colors[i]
}
}
</script>
</body>
</html>
网友评论