手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS3绘制超炫的上下起伏波动进度加载动画
CSS3绘制超炫的上下起伏波动进度加载动画
摘要:先看看效果图:CSSCode复制内容到剪贴板#loader1,#loader1:before,#loader1:after{backgrou...

先看看效果图:

CSS3绘制超炫的上下起伏波动进度加载动画1

CSS Code复制内容到剪贴板 #loader1, #loader1:before, #loader1:after{ background:#f2fa08; -webkit-animation:load11sinfiniteease-in-out; animation:load11sinfiniteease-in-out; width:1em; height:4em; } #loader1:before, #loader1:after{ position:absolute; top:0; content:''; } #loader1:before{ left:-1.5em; } #loader1{ text-indent:-9999em; margin:50px50px; position:relative; float:left; font-size:11px; -webkit-animation-delay:0.16s; animation-delay:0.16s; } #loader1:after{ left:1.5em; -webkit-animation-delay:0.32s; animation-delay:0.32s; } @-webkit-keyframesload1{ 0%, 80%, 100%{ box-shadow:00#f2fa08; height:4em; } 40%{ box-shadow:0-2em#f2fa08; height:5em; } } @keyframesload1{ 0%, 80%, 100%{ box-shadow:00#f2ff08; height:4em; } 40%{ box-shadow:0-2em#f2ff08; height:5em; } }

以上就是本文的全部内容,希望对大家的学习有所帮助。

【CSS3绘制超炫的上下起伏波动进度加载动画】相关文章:

CSS初级教程-CSS结合JS的运用

用CSS实现简单的进度条

另一个CSS图片替换的技巧

CSS3制作loading加载动画效果代码

CSS盒模型制定网页的宽度和高度的原理

DIV+CSS垂直居中一个浮动元素

CSS3对background的调整和增加的属性

CSS中使用counter()在列表中自动添加序号

DIV+CSS 全屏垂直居中的一个办法

CSS的滑动门技术研究

精品推荐
分类导航