小球形状的“loading”（在原文代码的基础上做的改造）

最新推荐文章于 2019-02-28 12:17:46 发布

落花新月

最新推荐文章于 2019-02-28 12:17:46 发布

阅读量1k

点赞数

分类专栏：等待加载文章标签：小球形状加载

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/52936376

版权

等待加载专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
   <title>小球形状的loading</title>
    <style>
        /* general styling */
        /*.box {*/
            /*width:450px;*/
            /*margin:18px auto;*/
            /*background: red;*/
        /*}*/

        /* position the bars and balls correctly (rotate them and translate them outward)*/
        .bar1 {
            -moz-transform:rotate(0deg) translate(0, -40px);
            -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
        }
        .bar2 {
            -moz-transform:rotate(45deg) translate(0, -40px);
            -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
        }
        .bar3 {
            -moz-transform:rotate(90deg) translate(0, -40px);
            -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
        }
        .bar4 {
            -moz-transform:rotate(135deg) translate(0, -40px);
            -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
        }
        .bar5 {
            -moz-transform:rotate(180deg) translate(0, -40px);
            -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
        }
        .bar6 {
            -moz-transform:rotate(225deg) translate(0, -40px);
            -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
        }
        .bar7 {
            -moz-transform:rotate(270deg) translate(0, -40px);
            -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
        }
        .bar8 {
            -moz-transform:rotate(315deg) translate(0, -40px);
            -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
        }


        /* set up the three ball spinners */
        #div4 {
            position:relative;
            width:100px;
            height:100px;
            margin:25px;
            -moz-border-radius:100px;
            -webkit-border-radius:100px;
            float:left;
            -moz-transform:scale(0.5);
            -webkit-transform:scale(0.5);

            -webkit-animation-name: rotateThis;
            -webkit-animation-duration:2s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-timing-function:linear;
        }
        #div4 div {
            width:20px;
            height:20px;
            background:#000;
            -moz-border-radius:40px;
            -webkit-border-radius:40px;
            position:absolute;
            left:40px;
            top:40px;
        }
        /* add a shadow to the first */
        #div4 div {
            -moz-box-shadow:black 0 0 4px;
            -webkit-box-shadow:black 0 0 4px;
        }


    </style>
    <script>

        //simple script to rotate all spinners 45 degrees on each tick
        //this works differently from the css transforms, which is smooth

        var count = 0;
        function rotate() {

            var elem4 = document.getElementById('div4');

            elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';

            elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';

            if (count==360) { count = 0 }
            count+=45;
            window.setTimeout(rotate, 100);
        }
        window.setTimeout(rotate, 100);
    </script>

</head>

<body>
<div class="box">
    <div id="div4">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
        <div class="bar4"></div>
        <div class="bar5"></div>
        <div class="bar6"></div>
        <div class="bar7"></div>
        <div class="bar8"></div>
    </div>
</div>




</body>

</html>

上述代码实现原文中第4个效果。（注：代码主要来自原作者，只在上面做了提取）

原文链接：

https://kilianvalkhof.com/uploads/spinners/

落花新月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小球形状的“loading”（在原文代码的基础上做的改造）

html> 小球形状的loading /* general styling */ /*.box {*/ /*width:450px;*/ /*margin:18px auto;*/ /*background: red;*/ /*}*/ /*
复制链接

扫一扫