HTML5 纯CSS3实现div按照顺序出入效果-CFANZ编程社区

HTML5 纯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>

0 条评论