关于css:CSS-3-实现-HTML-中的加载动画

52次阅读

共计 1323 个字符，预计需要花费 4 分钟才能阅读完成。

这是第二个 CSS 3 实现的加载中动画：

这是互联网上比拟常见的一种加载动画，我在很多软件应用中都见过，具体设计来源不明。实现原理和第一个动画相似，把整个动画拆分成多个线条块程度搁置在一起，而后自左向右地顺次执行高低拉伸变换，通过有限反复就失去了最终的成果，上面是代码：

<body>
    <style>
        body {background: #999999;}

        .DIV_loadingAnimation2 {
            position: fixed;
            height: 50px;
            font-size: 0;
        }

            .DIV_loadingAnimation2 div {
                width: 10px;
                height: 50px;
                background: white;
                display: inline-block;
                margin: 0 1px 0 0;
                transform: scaleY(.5);
            }

                .DIV_loadingAnimation2 div:nth-child(1) {animation: loadingAnimation2 1.5s linear infinite;}

                .DIV_loadingAnimation2 div:nth-child(2) {animation: loadingAnimation2 1.5s linear infinite .125s;}

                .DIV_loadingAnimation2 div:nth-child(3) {animation: loadingAnimation2 1.5s linear infinite .25s;}

                .DIV_loadingAnimation2 div:nth-child(4) {animation: loadingAnimation2 1.5s linear infinite .375s;}

                .DIV_loadingAnimation2 div:nth-child(5) {animation: loadingAnimation2 1.5s linear infinite .5s;}

                .DIV_loadingAnimation2 div:nth-child(6) {animation: loadingAnimation2 1.5s linear infinite .625s;}

                .DIV_loadingAnimation2 div:nth-child(7) {animation: loadingAnimation2 1.5s linear infinite .75s;}

                .DIV_loadingAnimation2 div:nth-child(8) {animation: loadingAnimation2 1.5s linear infinite .875s;}

        @keyframes loadingAnimation2 {
            0% {transform: scaleY(.5);
            }

            20% {transform: scaleY(1);
            }

            40% {transform: scaleY(.5);
            }
        }
    </style>
    <div class="DIV_loadingAnimation2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

正文完