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.效果图

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

【前端学习项目】web前端#001网页点名器（html+css+js实现用户交互）
目录首先先把学生一个一个的放到数组中其次遍历这个数组然后按钮事件触发最后附上完整代码: 最后的实现这个故事是这样开始的,新学期伊始,我们java老师为了检测学生的java基础水平,留下了这么 ...
一文带你了解web前端是如何制作表白网站(HTML+CSS+JS)
❤ 精彩专栏推荐
Web前端之过渡与动画
目录一.过渡(transition) 1.过渡(transition) 2.属性值二.动画三.实战 1.米兔 2.奔跑的少年 3.弹力球 4.酷炫球一.过渡(transition) 1.过渡( ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
html透明度_学好Web前端开发，必要了解的HTML+CSS的技巧有哪些
HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CS ...
入门精通web前端：三大核心HTML5、CSS3 、JS必学
WEB前端三大基础核心内容[HTML5.CSS3 和 JavaScript] 对于前端的学习和提高,我的基本思路是这样的.首先,前端的三个最基本的东西 HTML5.CSS3 和 JavaScript( ...
web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
web前端设计与开发期末作品HTML5+CSS大作业——明星杨洋(7页)
HTML5+CSS大作业--明星杨洋(7页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化 ...
前端小白入门必学：HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考. 一.HTML编码规范 1. img标签要写alt属性根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容 ...

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

1.less

2.js

3.css

4.html

5.效果图

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

最新文章

热门文章