看见别人些的加载的动画,觉得特别炫酷,然后我也试着自己写咯一个,这个动画是用的纯html 和 css3写的。
思路:
1、先定义一个大盒子,转需要用的元素
2、对需要做动画的标签进行定位操作
3、用css3实现你要的表情效果
其他的废话就不多少咯,具体请看下面的代码,不明白的地方,随时都可以call 我
html代码:
<div class="container">
<div class="br1 border"></div>
<div class='br2 border'></div>
<div class='br3 border'></div>
<div class='circle'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
<!-- </div> -->
</div>
css代码:
.container{ width: 300px; height: 300px; margin:50px auto; border:1px solid red; position: relative;}
.circle {width: 100%;height: 100%; position: relative; animation: spin 5s linear infinite;/*border:1px solid blue;*/}
.border {position: absolute;border-radius: 50%;border: 3px solid red;}
.br1{ width:140px; height: 140px; top:80px; left: 80px; border-left-color: transparent; border-right-color: transparent;animation: spin 5s linear infinite;}
.br2{ width:120px; height: 120px; top:90px; left:90px; border-left-color: transparent; border-right-color: transparent;animation: spin 5s reverse infinite;}
.br3{ width:70px; height: 70px; top:115px; left: 115px; border-left-color: transparent; border-right-color: transparent;animation: spin 5s alternate-reverse infinite;}
.circle .dot{position: absolute;display: block; width: 20px; height: 20px; border-radius: 50%; background: #f67b86;
animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
-webkit-animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
}
.dot:nth-child(1){ left: 50px; top:90px; animation-delay: 0s;}
.dot:nth-child(2){ left: 34px; top:130px;animation-delay: 0.4s;; }
.dot:nth-child(3){ left: 39px; top:170px;animation-delay: 0.8s; }
.dot:nth-child(4){ left: 59px; top:208px; animation-delay: 1.2s;}
.dot:nth-child(5){ left: 95px; top:235px; animation-delay: 1.6s;}
.dot:nth-child(6){ left: 140px; top:245px;animation-delay: 2.0s; }
.dot:nth-child(7){ left: 190px; top:233px;animation-delay: 2.4s; }
.dot:nth-child(8){ left: 225px; top:203px; animation-delay: 2.80s;}
.dot:nth-child(9){ left: 243px; top:165px; animation-delay: 3.2s;}
.dot:nth-child(10){ left: 244px; top:122px;animation-delay: 3.6s; }
.dot:nth-child(11){ left: 227px; top:80px;animation-delay: 4.0s; }
.dot:nth-child(12){ left: 194px; top:49px;animation-delay: 4.4s; }
.dot:nth-child(13){ left: 145px; top:35px;animation-delay: 4.8s; }
.dot:nth-child(14){ left: 85px; top:50px;animation-delay: 5.2s; }
/*动画*/
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@-webkit-keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@-moz-keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/*渐变收缩*/
@keyframes jitter {
0% { transform: scale(1, 1);}
25% { transform: scale(0.7, 0.7);}
50% {transform: scale(1, 1);}
75% {transform: scale(1.3, 1.3);}
100% {transform: scale(1, 1);}
}
@-webkit-keyframes jitter {
0% { transform: scale(1, 1);}
25% { transform: scale(0.7, 0.7);}
50% {transform: scale(1, 1);}
75% {transform: scale(1.3, 1.3);}
100% {transform: scale(1, 1);}
}
@-moz-keyframes jitter {
0% { transform: scale(1, 1);}
25% { transform: scale(0.7, 0.7);}
50% {transform: scale(1, 1);}
75% {transform: scale(1.3, 1.3);}
100% {transform: scale(1, 1);}
}
/*透明度*/
@keyframes fade-in-out {
0% { opacity: 0.8;}
25% {opacity: 0.2;}
75% {opacity: 1;}
100% { opacity: 0.8;}
}
@-webkit-keyframes fade-in-out {
0% { opacity: 0.8;}
25% {opacity: 0.2;}
75% {opacity: 1;}
100% { opacity: 0.8;}
}
@-moz-keyframes fade-in-out {
0% { opacity: 0.8;}
25% {opacity: 0.2;}
75% {opacity: 1;}
100% { opacity: 0.8;}
}
效果图如下: