zoukankan      html  css  js  c++  java
  • css3的loadding效果

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS3 loading效果</title>
            <meta charset="utf-8" />
            <style type="text/css" media="screen">
                * {
                    margin: 0;
                    padding: 0;
                }
                #loading {
                    position: absolute;
                    left: 600px;
                    top: 147px;
                    color: #666;
                }
                #loading span{
                    display: block;
                    position: absolute;
                    top: 32px;
                    height: 10px;
                     10px;
                    border: 1px solid #999;
                    background-color: #CCC;
                    -webkit-animation-iteration-count: infinite;
                    -webkit-animation-duration: 2.5s;
                }
                #loading span:nth-of-type(1){
                    left: 0;
                    -webkit-animation-name: animationloading1;
                }
                #loading span:nth-of-type(2){
                    left: 20px;
                    -webkit-animation-name: animationloading2;
                }
                #loading span:nth-of-type(3){
                    left: 40px;
                    -webkit-animation-name: animationloading3;
                }
                #loading span:nth-of-type(4){
                    left: 60px;
                    -webkit-animation-name: animationloading4;
                }
                #loading span:nth-of-type(5){
                    left: 80px;
                    -webkit-animation-name: animationloading5;
                }
                @-webkit-keyframes animationloading1{
                    0%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    20%{
                        -webkit-transform: scale(1.5);
                        background-color: #999;
                    }
                    21%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    100%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                }
                @-webkit-keyframes animationloading2{
                    0%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    20%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    40%{
                        -webkit-transform: scale(1.5);
                        background-color: #999;
                    }
                    41%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    100%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                }
                @-webkit-keyframes animationloading3{
                    0%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    40%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    60%{
                        -webkit-transform: scale(1.5);
                        background-color: #999;
                    }
                    61%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    100%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                }
                @-webkit-keyframes animationloading4{
                    0%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    60%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    80%{
                        -webkit-transform: scale(1.5);
                        background-color: #999;
                    }
                    81%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    100%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                }
                @-webkit-keyframes animationloading5{
                    0%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    80%{
                        -webkit-transform: scale(1);
                        background-color: #CCC;
                    }
                    100%{
                        -webkit-transform: scale(1.5);
                        background-color: #999;
                    }
                }
            </style>
        </head>
        <body>
            <div id="loading">
                <h3>正在转入<a href="http://www.baidu.com">CSS3持续一组连贯动画</a> 加载中……请稍候进入百度搜索</h3>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </body>
    </html>
  • 相关阅读:
    网安-04-DHCP部署与安全、DNS部署与安全
    网安-03-NTFS安全权限、文件共享服务器
    网安-02-批处理、病毒、用户与组管理、破解系统密码
    网安-01-IP详解及简单的DOS命令
    [异常笔记]required a bean of type 'org.quartz.JobExecutionContext' that could not be found
    [异常笔记]poi读取Excel异常
    CentOS7 minimal 没有netstat命令
    Docker运行Nginx服务器
    大数据开发从入门小白到删库跑路(一)- 获取Hadoop
    Docker 运行MangoDB
  • 原文地址:https://www.cnblogs.com/huntaheart/p/4026192.html
Copyright © 2011-2022 走看看