纯CSS 仿某网站 loading加载动画

最新推荐文章于 2024-08-28 21:26:11 发布

死垃圾

最新推荐文章于 2024-08-28 21:26:11 发布

阅读量1.4k

点赞数

文章标签： css css3 动画

本文链接：https://blog.csdn.net/sszcome/article/details/64444720

版权

原理很简单，使用css3的动画，兼容webkit内核浏览器（支持移动端）和一些标准浏览器，如果需要支持其他内核的浏览器，比如火狐（加上-moz-）、opera(加上-o-)、版本高于10的IE浏览器（加上-ms-）前缀。话不多说，上截图。
![图片1](https://img-blog.csdn.net/20170321171841677?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3N6Y29tZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![这里写图片描述](https://img-blog.csdn.net/20170321172010647?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3N6Y29tZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
下面贴上代码：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta name="viewport"
      content="width=device-width,initial-scale=1.0,maxmun-scale=1.0,minimun-scale=1.0,user-scalable=no">
<title>loading</title>  
<style>  
    body{
        margin:0px;
    }
    #div{
        position: absolute;
        top:50%;
        left: 50%;
        width: 100px;
        height:10px;
        margin-top:-5px;
        margin-left: -50px;
    }
    #div span{
        position: relative;
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 15px;
        border-radius: 100%;
    }
    #div span:nth-child(1){
        background-color:red; 
        -webkit-animation:ball-first 3s ease-in-out infinite ;
    }
    #div span:nth-child(2){
        background-color:blue; 
    }
    #div span:nth-child(3){
        background-color:green; 
        -webkit-animation:ball-third 3s ease-in-out infinite ;
    }
    @keyframes ball-first{
        0%{
            transform:translateX(0);
            background-color:red; 
        }
        50%{
            transform:translateX(50px);
            background-color:green; 
        }
        100%{
            transform:translateX(0);
            background-color:red; 
        }   
    }
    @-webkit-keyframes ball-first{
        0%{
            -webkit-transform:translateX(0);
            background-color:red;
        }
        50%{
            -webkit-transform:translateX(50px);
            background-color:green;
        }
        100%{
            -webkit-transform:translateX(0);
            background-color:red;
        }
    }
    @keyframes ball-third{
        0%{
            transform:translateX(0);
            background-color:green;
        }
        50%{
            transform:translateX(-50px);
            background-color:red;
        }
        100%{
            transform:translateX(0);
            background-color:green;

        }   
    }
    @-webkit-keyframes ball-third{
        0%{
            -webkit-transform:translateX(0);
            background-color:green;
        }
        50%{
            -webkit-transform:translateX(-50px);
            background-color:red;
        }
        100%{
            -webkit-transform:translateX(0);
            background-color:green;
        }
    }
</style>  
<script>  



</script>  
</head>  

<body>  
    <div id="div">
        <span></span><!-- 
         --><span></span><!-- 
         --><span></span>
    </div>    
</body>  
</html>