• css页面加载动画


    <!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;
                     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%;
                     100%
                }
                
                .cs-loader-inner {
                    transform: translateY(-50%);
                    top: 50%;
                    position: absolute;
                     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>
  • 相关阅读:
    你的程序员女孩「GitHub 热点速览 v.22.09」
    高手过招不用鼠标,一款超好用的跨平台命令行界面库
    程序员的情人节「GitHub 热点速览 v.22.07」
    火爆的文字游戏你玩了吗?「GitHub 热点速览 v.22.06」
    SpringBoot入门
    将Bean放入Spring容器中的五种方式
    retransformClasses代码增强摘要
    网路代理技术
    Linux版钉钉使用
    deepin 创建桌面图标
  • 原文地址:https://www.cnblogs.com/lipengze/p/11555215.html
Copyright © 2020-2023  润新知