本文主要介绍了纯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按照顺序出入效果内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!