这是一款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 文字打印机特效
这个不错耶，我喜欢！
评：本站主题由“唯品秀前端技术博客”免费提供学习啦，很久没浏览过了！
评：本站主题由“唯品秀前端技术博客”免费提供春暖花开，下次再来！
评：本站主题由“唯品秀前端技术博客”免费提供不让出门，只能刷刷博客了！
评：本站主题由“唯品秀前端技术博客”免费提供不是,最在乎的未必是最爱的,但最爱的人肯定是最在乎的
评：个人博客建好了，但经营起来还是蛮不容易的有位置
评：HTML5新增标签
