脚本宝典收集整理的这篇文章主要介绍了纯CSS3实现div按照顺序出入效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文主要介绍了纯CSS3实现div按照顺序出入效果,具有一定的参考价值,感兴趣的可以了解一下
效果:
源代码:
<!DOCTYPE htML> <html> <head> <meta charset="UTF-8"> <tITle></title> <style type="text/css"> div{ margin-top: 10px; height: 50px; background-color: #FF0000; opacity: 0.6; } .a{ animation: aa 2s linear 100ms infinite; } .b{ animation: bb 2s linear infinite } .c{ animation: cc 2s linear infinite } .d{ animation:dd 2s linear infinite } @keyframes aa{ 0%{width: 0;} 25%{width:200px;} 50%{width:200px;} 75%{width:200px;} 100%{width:200px;} } @keyframes bb{ 0%{width: 0;} 25%{width:0px;} 50%{width:200px;} 75%{width:200px;} 100%{width:200px;} } @keyframes cc{ 0%{width: 0;} 25%{width:0px;} 50%{width:0px;} 75%{width:200px;} 100%{width:200px;} } @keyframes dd{ 0%{width: 0;} 25%{width:0px;} 50%{width:0px;} 75%{width:0px;} 100%{width:200px;} } </style> </head> <body> <div class="a"> </div> <div class="b"> </div> <div class="c"> </div> <div class="d"> </div> </body> </html>
到此这篇关于纯CSS3实现div按照顺序出入效果的文章就介绍到这了,更多相关CSS3 div按照顺序出入效果内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的纯CSS3实现div按照顺序出入效果全部内容,希望文章能够帮你解决纯CSS3实现div按照顺序出入效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。