乐趣区

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

这是第二个 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>
退出移动版