WeX5框架开发中菊花转功能

最新推荐文章于 2019-07-10 14:22:15 发布

置顶博主逸尘

最新推荐文章于 2019-07-10 14:22:15 发布

阅读量658

点赞数

文章标签： WeX5 菊花转

本文链接：https://blog.csdn.net/qq_16497617/article/details/53467212

版权

两个页面交互时间过长的时候用户体验很不好，我们往往会添加个动画，俗称菊花转

我们这个项目是用WeX5开发的，查阅了很多资料最后实现了菊花效果

整个效果如下图所示：

在源码中添加如下代码

 <div class="spinner">
        <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 class="bar9">
        </div>
        <div class="bar10">
        </div>
        <div class="bar11">
        </div>
        <div class="bar12">
        </div>
    </div>

在CSS中添加如下代码：

@-webkit-keyframes loading {
            from {opacity: 1;width:1px;height:1px;}
            to {opacity: 0.25;width:8px;height:8px;}
        }
        div.spinner {
            position: absolute;
            top:50%;
            left:50%;
            display: inline-block;
        }
        div.spinner div {
        	width:8px;
        	height:8px;
            background: #a4a2a4;
            border:1px solid #fff;
            position: absolute;
            left: 100%;
            top: 100%;
            opacity: 0;

            -webkit-animation: loading 2s linear infinite;
            -webkit-border-radius: 30px;
        }
        div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -34px); -webkit-animation-delay: -0s;}
        div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -34px); -webkit-animation-delay: -1.8334s;}
        div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -34px); -webkit-animation-delay: -1.6668s;}
        div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -34px); -webkit-animation-delay: -1.5002s;}
        div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -34px); -webkit-animation-delay: -1.3336s;}
        div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -34px); -webkit-animation-delay: -1.167s;}
        div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -34px); -webkit-animation-delay: -1.0004s;}
        div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -34px); -webkit-animation-delay: -0.8338s;}
        div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -34px); -webkit-animation-delay: -0.6672s;}
        div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -34px); -webkit-animation-delay: -0.5006s;}
        div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -34px); -webkit-animation-delay: -0.334s;}
        div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -34px); -webkit-animation-delay: -0.1674s;}