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

CSS3实现的闪烁跳跃进度条示例

CSS网页布局的意义与副作用

CSS里随滚动条滚动代码

详解CSS的定位语法应用

纯css实现的下拉菜单只有边框底纹用到图片

CSS技巧荟萃:了解CSS页面布局和加载流程

用CSS3打造独具创意的动画菜单效果

关于CSS组合与CSS嵌套的写法应用

精品推荐
分类导航