CSS3制作div依照顺序出入效果的代码是什么

发布时间：2023-09-19 09:43:17 所属栏目：语言来源：

导读：这篇文章主要讲解了“CSS3制作div依据顺序出入效果的代码是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习吧！

源代码：

<!DOCTYPE html>

这篇文章主要讲解了“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>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!