代码:纯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按照顺序出入效果没有解决您的问题，您还可以在CSS栏目中查看更多相关内容。
