纯CSS3实现div按照顺序出入效果
程序员文章站
2022-06-18 16:51:46
本文主要介绍了纯css3实现div按照顺序出入效果,具有一定的参考价值,感兴趣的可以了解一下效果:源代码:&l...
本文主要介绍了纯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按照顺序出入效果内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
上一篇: MySQL教程数据定义语言DDL示例详解
下一篇: 发现自己压根就没起过身换过地方