两个页面交互时间过长的时候用户体验很不好,我们往往会添加个动画,俗称菊花转
我们这个项目是用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;}