纯CSS3实现div按照顺序出入效果 -

首页 > 博客列表 > 纯CSS3实现div按照顺序出入效果

博主信息

博文 11

粉丝 0

访问量 17913

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

纯CSS3实现div按照顺序出入效果

**沐曦??

原创

708人浏览过

代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html输入两个数实现加减乘除功能

2021-10-12 12:43:59