有了梦想,我们的心有了飞翔; 有了飞翔,我们的梦想不再遥远。。。。。。
开抢双十一红包

css3 loading效果

2015年12月7日 梦想霞 1808 次浏览

这是一款css3做的loading动画效果,在网页加载等待的时候,可以加入一个loading动画效果,让大家在打开网页加载慢的时候,不再枯燥。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    .spinner {<br />        margin: 100px auto;<br />       width: 20px;<br />      height: 20px;<br />     position: relative;<br />   }<br /> .container1 > div, .container2 > div, .container3 > div {<br />     width: 6px;<br />       height: 6px;<br />      background-color: #ff66cc;<br />        border-radius: 100%;<br />      position: absolute;<br />       -webkit-animation: bouncedelay 1.2s infinite ease-in-out;<br />     animation: bouncedelay 1.2s infinite ease-in-out;<br />     -webkit-animation-fill-mode: both;<br />        animation-fill-mode: both;<br />    }<br /> .spinner .spinner-container {<br />     position: absolute;<br />       width: 100%;<br />      height: 100%;<br /> }<br /> .container2 {<br />     -webkit-transform: rotateZ(45deg);<br />        transform: rotateZ(45deg);<br />    }<br /> .container3 {<br />     -webkit-transform: rotateZ(90deg);<br />        transform: rotateZ(90deg);<br />    }<br /> .circle1 {<br />        top: 0; left: 0;<br />  }<br /> .circle2 {<br />        top: 0; right: 0;<br /> }<br /> .circle3 {<br />        right: 0; bottom: 0;<br />  }<br /> .circle4 {<br />        left: 0; bottom: 0;<br />   }<br /> .container2 .circle1 {<br />        -webkit-animation-delay: -1.1s;<br />       animation-delay: -1.1s;<br />   }<br /> .container3 .circle1 {<br />        -webkit-animation-delay: -1.0s;<br />       animation-delay: -1.0s;<br />   }<br /> .container1 .circle2 {<br />        -webkit-animation-delay: -0.9s;<br />       animation-delay: -0.9s;<br />   }<br /> .container2 .circle2 {<br />        -webkit-animation-delay: -0.8s;<br />       animation-delay: -0.8s;<br />   }<br /> .container3 .circle2 {<br />        -webkit-animation-delay: -0.7s;<br />       animation-delay: -0.7s;<br />   }<br /> .container1 .circle3 {<br />        -webkit-animation-delay: -0.6s;<br />       animation-delay: -0.6s;<br />   }<br /> .container2 .circle3 {<br />        -webkit-animation-delay: -0.5s;<br />       animation-delay: -0.5s;<br />   }<br /> .container3 .circle3 {<br />        -webkit-animation-delay: -0.4s;<br />       animation-delay: -0.4s;<br />   }<br /> .container1 .circle4 {<br />        -webkit-animation-delay: -0.3s;<br />       animation-delay: -0.3s;<br />   }<br /> .container2 .circle4 {<br />        -webkit-animation-delay: -0.2s;<br />       animation-delay: -0.2s;<br />   }<br /> .container3 .circle4 {<br />        -webkit-animation-delay: -0.1s;<br />       animation-delay: -0.1s;<br />   }<br /> @-webkit-keyframes bouncedelay {<br />      0%, 80%, 100% { -webkit-transform: scale(0.0) }<br />       40% { -webkit-transform: scale(1.0) }<br /> }<br /> @keyframes bouncedelay {<br />      0%, 80%, 100% {<br />           transform: scale(0.0);<br />            -webkit-transform: scale(0.0);<br />        }<br />     40% {<br />         transform: scale(1.0);<br />            -webkit-transform: scale(1.0);<br />        }<br /> }<br /></style>
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
点击查看本文演示内容

标签:

上一篇: jquery 文字打印机特效

下一篇: IMG图片下面出现下边距的解决办法



热门文章

随机文章

站点统计

  • 文章:46 篇
  • 分类:10 个
  • 标签:99 个
  • 运行:990天
  • 更新:2018年2月7日
  • RSS Feed