web前端：波浪舞动开机动画loading，原生css、js，@keyframes应用

1.less

* {
    margin: 0;
    padding: 0;
    //html,body{}
    body {
        height: 100%; //高度继承
        overflow: hidden; //滚动条禁止
        #wrap {
            position: absolute;
            width: 600px;
            height: 600px;
            background: url(../img/my-logo-2.png) repeat;
            background-size: 50px;
            border: 2px solid steelblue;
            border-radius: 8%;
            box-shadow: 2px 2px 5px #000000;
            text-align: center;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left: -300px;
            &:hover #wrap-inner #wrap-logo {
                animation-play-state: paused;
            }
            #logo {
                position: absolute;
                width: 120px;
                height: 40px;
                font: 30px/38px "微软雅黑";
                color: white;
                background: tomato;
                border: 2px solid white;
                border-radius: 8%;
                top: 80%;
                left: 40%;
            }
            /**
             1-2s开机动画的作用：便于后台加载数据，吸引用户注意力，避免脏数据被用户读取
             */
            #wrap-inner {
                position: absolute;
                width: 400px;
                height: 300px;
                background: salmon;
                border: 1px solid white;
                border-radius: 8%;
                box-shadow: 2px 2px 5px salmon;
                top: 50%;
                left: 50%;
                margin-top: -150px;
                margin-left: -200px;
                .description {
                    position: absolute;
                    color: white;
                    font: 30px "微软雅黑";
                    font-weight: lighter;
                    top: 24%;
                    left: 28%;
                }
                #wrap-logo {
                    position: absolute;
                    width: 400px;
                    height: 200px;
                    font: 20px "微软雅黑";
                    text-align: center;
                    top: 50%;
                    left: 50%;
                    margin-top: 50px;
                    margin-left: -200px;
                    //规定段落中的文本不进行换行
                    white-space: nowrap;
                    span{
                        //transform对span块级元素不起作用
                        //absolute：会将内容拼到一个点，相对定位保持当前位置横向排列
                        font-weight: bold;
                        font: 20px;
                        position: relative;
                        //infinite:无限  alternate：循环动作from→to→from
                        //animation: textMove 1s infinite alternate;
                        //TODO:JS指定每个span的delay错落move
                    }
                }
            }
        }
    }
    @keyframes textMove {
        from {
            top: 0px;
        }
        to {
            top: -40px;
        }
    }
}

2.js

window.onload=function(){
	var spanNodes=document.querySelectorAll("#wrap > #wrap-inner > #wrap-logo > span");
	var colors=["yellow","aquamarine","yellowgreen","skyblue","white","orange","red","yellow","aquamarine","yellowgreen","skyblue","white","orange","green","white"];
	for(var i=0;i<spanNodes.length;i++){
		//加入delay延迟
		spanNodes[i].style.animation="textMove .3s "+(i*50)+"ms linear infinite alternate";
		spanNodes[i].style.color=colors[i];
	}
}

3.css

* {
  margin: 0;
  padding: 0;
}
* body {
  height: 100%;
  overflow: hidden;
}
* body #wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  background: url(../img/my-logo-2.png) repeat;
  background-size: 50px;
  border: 2px solid steelblue;
  border-radius: 8%;
  box-shadow: 2px 2px 5px #000000;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -300px;
  /**
             1-2s开机动画的作用：便于后台加载数据，吸引用户注意力，避免脏数据被用户读取
             */
}
* body #wrap:hover #wrap-inner #wrap-logo {
  animation-play-state: paused;
}
* body #wrap #logo {
  position: absolute;
  width: 120px;
  height: 40px;
  font: 30px/38px "微软雅黑";
  color: white;
  background: tomato;
  border: 2px solid white;
  border-radius: 8%;
  top: 80%;
  left: 40%;
}
* body #wrap #wrap-inner {
  position: absolute;
  width: 400px;
  height: 300px;
  background: salmon;
  border: 1px solid white;
  border-radius: 8%;
  box-shadow: 2px 2px 5px salmon;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -200px;
}
* body #wrap #wrap-inner .description {
  position: absolute;
  color: white;
  font: 30px "微软雅黑";
  font-weight: lighter;
  top: 24%;
  left: 28%;
}
* body #wrap #wrap-inner #wrap-logo {
  position: absolute;
  width: 400px;
  height: 200px;
  font: 20px "微软雅黑";
  text-align: center;
  top: 50%;
  left: 50%;
  margin-top: 50px;
  margin-left: -200px;
  white-space: nowrap;
}
* body #wrap #wrap-inner #wrap-logo span {
  font-weight: bold;
  font: 20px;
  position: relative;
}
@keyframes textMove {
  from {
    top: 0px;
  }
  to {
    top: -40px;
  }
}

4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--移动端开发，需要加 meta-->
		<meta name="viewport" content="width=device-width,initial-scal=1.0,user-scalable=no" />
		<title>开机动画module1</title>
	</head>
		<body>
		<div id="wrap">
			<div id="logo">cevent</div>
			<div id="wrap-inner">
				<span class="description">开机动画展示</span>
				<div id="wrap-logo">
					<span>欢</span>
					<span>迎</span>
					<span>进</span>
					<span>入</span>
					<span>动</span>
					<span>态</span>
					<span>开</span>
					<span>机</span>
					<span>L</span>
					<span>O</span>
					<span>A</span>
					<span>D</span>
					<span>.</span>
					<span>.</span>
					<span>.</span>
				</div>
			</div>
		</div>
	</body>
	<link rel="stylesheet" href="css/launch-window-module.css" />
	<script type="text/javascript" src="js/launch-window-module.js"></script>
</html>

5.效果图