css页面加载动画

时间：2019-09-20 10:22:01 阅读：116 评论：0 收藏：0 [点我收藏+]

标签：动画图片 active nbsp oct label dev ice device

技术图片

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <style type="text/css">
            .preloader {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                background: #49a9ee;
                z-index: 9999;
                transition: opacity .65s
            }
            
            .preloader-hidden-add {
                opacity: 1;
                display: block
            }
            
            .preloader-hidden-add-active {
                opacity: 0
            }
            
            .preloader-hidden {
                display: none
            }
            
            .cs-loader {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%
            }
            
            .cs-loader-inner {
                transform: translateY(-50%);
                top: 50%;
                position: absolute;
                width: 100%;
                color: #fff;
                text-align: center
            }
            
            .cs-loader-inner label {
                font-size: 20px;
                opacity: 0;
                display: inline-block
            }
            
            .cs-loader-inner label:nth-child(6) {
                animation: lol 3s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(5) {
                animation: lol 3s .1s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(4) {
                animation: lol 3s .2s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(3) {
                animation: lol 3s .3s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(2) {
                animation: lol 3s .4s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(1) {
                animation: lol 3s .5s infinite ease-in-out
            }
            
            @keyframes lol {
                0% {
                    opacity: 0;
                    transform: translateX(-300px)
                }
                33% {
                    opacity: 1;
                    transform: translateX(0)
                }
                66% {
                    opacity: 1;
                    transform: translateX(0)
                }
                100% {
                    opacity: 0;
                    transform: translateX(300px)
                }
            }
        </style>
    </head>
    <body>
        <div class="preloader">
            <div class="cs-loader">
                <div class="cs-loader-inner">
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                </div>
            </div>
        </div>
    </body>
</html>

css页面加载动画

标签：动画图片 active nbsp oct label dev ice device

原文地址：https://www.cnblogs.com/1212dsa/p/11555215.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行