当前位置:Web前端 > > 正文

加载页面执行css动画效果(纯CSS实现预加载动画效果)

时间:2022-01-26 01:34:18类别:Web前端

加载页面执行css动画效果

纯CSS实现预加载动画效果

效果图

加载页面执行css动画效果(纯CSS实现预加载动画效果)

下载地址:http://xiazai.jb51.net/201709/yuanma/css_loading_jb51.rar

  • <style>
        #loading {
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background: #121220;
            overflow:hidden;
            z-index:9999;
        }
        /*加载圈*/
        .spinner {
            margin:0 auto;
            width:60px;
            height:60px;
            position:relative;
            top:40%;
        }
        .container1 > li,.container2 > li,.container3 > li {
            width:15px;
            height:15px;
            background-color:#fff;
            border-radius:100%;
            position:absolute;
            -webkit-animation:bouncedelay 1.2s infinite ease-in-out;
            animation:bouncedelay 1.2s infinite ease-in-out;
            -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
        }
        .spinner .spinner-container {
            position:absolute;
            width:100%;
            height:100%;
        }
        .container2 {
            -webkit-transform:rotateZ(45deg);
            transform:rotateZ(45deg);
        }
        .container3 {
            -webkit-transform:rotateZ(90deg);
            transform:rotateZ(90deg);
        }
        .circle1 {
            top:0;
            left:0;
        }
        .circle2 {
            top:0;
            right:0;
        }
        .circle3 {
            right:0;
            bottom:0;
        }
        .circle4 {
            left:0;
            bottom:0;
        }
        .container2 .circle1 {
            -webkit-animation-delay:-1.1s;
            animation-delay:-1.1s;
        }
        .container3 .circle1 {
            -webkit-animation-delay:-1.0s;
            animation-delay:-1.0s;
        }
        .container1 .circle2 {
            -webkit-animation-delay:-0.9s;
            animation-delay:-0.9s;
        }
        .container2 .circle2 {
            -webkit-animation-delay:-0.8s;
            animation-delay:-0.8s;
        }
        .container3 .circle2 {
            -webkit-animation-delay:-0.7s;
            animation-delay:-0.7s;
        }
        .container1 .circle3 {
            -webkit-animation-delay:-0.6s;
            animation-delay:-0.6s;
        }
        .container2 .circle3 {
            -webkit-animation-delay:-0.5s;
            animation-delay:-0.5s;
        }
        .container3 .circle3 {
            -webkit-animation-delay:-0.4s;
            animation-delay:-0.4s;
        }
        .container1 .circle4 {
            -webkit-animation-delay:-0.3s;
            animation-delay:-0.3s;
        }
        .container2 .circle4 {
            -webkit-animation-delay:-0.2s;
            animation-delay:-0.2s;
        }
        .container3 .circle4 {
            -webkit-animation-delay:-0.1s;
            animation-delay:-0.1s;
        }
        @-webkit-keyframes bouncedelay {
            0%,80%,100% {
                -webkit-transform:scale(0.0)
            }
            40% {
                -webkit-transform:scale(1.0)
            }
        }
        @keyframes bouncedelay {
            0%,80%,100% {
                transform:scale(0.0);
                -webkit-transform:scale(0.0);
        }
            40% {
                transform:scale(1.0);
                -webkit-transform:scale(1.0);
            }
        }
    </style>
    <body>
        <li id="loading" >
            <li class="spinner">
              <li class="spinner-container container1">
                <li class="circle1"></li>
                <li class="circle2"></li>
                <li class="circle3"></li>
                <li class="circle4"></li>
              </li>
              <li class="spinner-container container2">
                <li class="circle1"></li>
                <li class="circle2"></li>
                <li class="circle3"></li>
                <li class="circle4"></li>
              </li>
              <li class="spinner-container container3">
                <li class="circle1"></li>
                <li class="circle2"></li>
                <li class="circle3"></li>
                <li class="circle4"></li>
              </li>
            </li>
        </li>
    </body>
    
  • 总结

    以上所述是小编给大家介绍的纯CSS实现预加载动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐