一个梦想成为web前端开发人员的个人博客网站
当前位置: 前端学习 > HTML5 > css3 loading效果

css3 loading效果

2015-12-07 分类:HTML5 作者:梦想霞 阅读(2701)

这是一款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>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝
微信
0

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

博客简介

沉鱼落雁,闭月羞花,一个妖娆多姿梦想成为代码女神的前端个人网站分享自己程序人生,欢迎大家一起交流分享前端开发技术经验,更多web前端开发教程,可关注 - 唯品秀前端技术博客

精彩评论

服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线