代码:纯CSS3实现div按照顺序出入效果
2年前 (2024-03-20)CSS2.9k
复制本页网址打印
本文主要介绍了纯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按照顺序出入效果没有解决您的问题，您还可以在CSS栏目中查看更多相关内容。
赞0
打赏
重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们，我们将尽快处理，谢谢支持！