手机
当前位置:查字典教程网 >网页设计 > 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嵌套的写法应用

CSS3实现漂亮的按钮动画

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

CSS条状图表进度条

详解CSS的定位语法应用

CSS中Font的一些基本知识点归纳总结

CSS的滑动门技术研究

CSS里随滚动条滚动代码

10个CSS简写/优化技巧整理

CSS3 实现侧边栏展开收起动画

精品推荐
分类导航