6种纯css实现loading效果
1、
<div id="loadingWrap1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> #loadingWrap1 {
position: relative
} #loadingWrap1 span {
display: block;
bottom: 0;
width: 9px;
height: 5px;
background: #9b59b6;
position: absolute;
-webkit-animation: loadingWrap1 1.5s infinite ease-in-out;
-moz-animation: loadingWrap1 1.5s infinite ease-in-out;
-ms-animation: loadingWrap1 1.5s infinite ease-in-out;
-o-animation: loadingWrap1 1.5s infinite ease-in-out;
animation: loadingWrap1 1.5s infinite ease-in-out
} #loadingWrap1 span:nth-child(2) {
left: 11px;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
-o-animation-delay: .2s;
animation-delay: .2s
} #loadingWrap1 span:nth-child(3) {
left: 22px;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-ms-animation-delay: .4s;
-o-animation-delay: .4s;
animation-delay: .4s
} #loadingWrap1 span:nth-child(4) {
left: 33px;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
-o-animation-delay: .6s;
animation-delay: .6s
} #loadingWrap1 span:nth-child(5) {
left: 44px;
-webkit-animation-delay: .8s;
-moz-animation-delay: .8s;
-ms-animation-delay: .8s;
-o-animation-delay: .8s;
animation-delay: .8s
} @-webkit-keyframes loadingWrap1 {
0% {
height: 5px;
-webkit-transform: translateY(0px);
background: #9b59b6
} 25% {
height: 30px;
-webkit-transform: translateY(15px);
background: #3498db
} 50% {
height: 5px;
-webkit-transform: translateY(0px);
background: #9b59b6
} 100% {
height: 5px;
-webkit-transform: translateY(0px);
background: #9b59b6
}
} @-moz-keyframes loadingWrap1 {
0% {
height: 5px;
-moz-transform: translateY(0px);
background: #9b59b6
} 25% {
height: 30px;
-moz-transform: translateY(15px);
background: #3498db
} 50% {
height: 5px;
-moz-transform: translateY(0px);
background: #9b59b6
} 100% {
height: 5px;
-moz-transform: translateY(0px);
background: #9b59b6
}
} @-ms-keyframes loadingWrap1 {
0% {
height: 5px;
-ms-transform: translateY(0px);
background: #9b59b6
} 25% {
height: 30px;
-ms-transform: translateY(15px);
background: #3498db
} 50% {
height: 5px;
-ms-transform: translateY(0px);
background: #9b59b6
} 100% {
height: 5px;
-ms-transform: translateY(0px);
background: #9b59b6
}
} @keyframes loadingWrap1 {
0% {
height: 5px;
transform: translateY(0px);
background: #9b59b6
} 25% {
height: 30px;
transform: translateY(15px);
background: #3498db
} 50% {
height: 5px;
transform: translateY(0px);
background: #9b59b6
} 100% {
height: 5px;
transform: translateY(0px);
background: #9b59b6
}
}
2、
<div id="loadingWrap2">
<span></span>
<span></span>
<span></span>
<span></span>
</div> #loadingWrap2 {
position: relative;
left: 50%;
width: 40px;
height: 40px
} #loadingWrap2 span {
display: block;
bottom: 0;
width: 20px;
height: 20px;
background: #9b59b6;
position: absolute
} #loadingWrap2 span:nth-child(1) {
-webkit-animation: loadingWrap2_1 1.5s infinite ease-in-out;
-moz-animation: loadingWrap2_1 1.5s infinite ease-in-out;
-ms-animation: loadingWrap2_1 1.5s infinite ease-in-out;
animation: loadingWrap2_1 1.5s infinite ease-in-out
} #loadingWrap2 span:nth-child(2) {
left: 20px;
-webkit-animation: loadingWrap2_2 1.5s infinite ease-in-out;
-moz-animation: loadingWrap2_2 1.5s infinite ease-in-out;
-ms-animation: loadingWrap2_2 1.5s infinite ease-in-out;
animation: loadingWrap2_2 1.5s infinite ease-in-out
} #loadingWrap2 span:nth-child(3) {
top: 0;
-webkit-animation: loadingWrap2_3 1.5s infinite ease-in-out;
-moz-animation: loadingWrap2_3 1.5s infinite ease-in-out;
-ms-animation: loadingWrap2_3 1.5s infinite ease-in-out;
animation: loadingWrap2_3 1.5s infinite ease-in-out
} #loadingWrap2 span:nth-child(4) {
top: 0;
left: 20px;
-webkit-animation: loadingWrap2_4 1.5s infinite ease-in-out;
-moz-animation: loadingWrap2_4 1.5s infinite ease-in-out;
-ms-animation: loadingWrap2_4 1.5s infinite ease-in-out;
animation: loadingWrap2_4 1.5s infinite ease-in-out
} @-webkit-keyframes loadingWrap2_1 {
0% {
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius: 20px;
background: #3498db
} 80% {
-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
} 100% {
-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
}
} @-webkit-keyframes loadingWrap2_2 {
0% {
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);
border-radius: 20px;
background: #f1c40f
} 80% {
-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
} 100% {
-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
}
} @-webkit-keyframes loadingWrap2_3 {
0% {
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius: 20px;
background: #2ecc71
} 80% {
-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
} 100% {
-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
}
} @-webkit-keyframes loadingWrap2_4 {
0% {
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-webkit-transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius: 20px;
background: #e74c3c
} 80% {
-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
} 100% {
-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
}
} @-moz-keyframes loadingWrap2_1 {
0% {
-moz-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius: 20px;
background: #3498db
} 80% {
-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
} 100% {
-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
}
} @-moz-keyframes loadingWrap2_2 {
0% {
-moz-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);
border-radius: 20px;
background: #f1c40f
} 80% {
-moz-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
} 100% {
-moz-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
}
} @-moz-keyframes loadingWrap2_3 {
0% {
-moz-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius: 20px;
background: #2ecc71
} 80% {
-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
} 100% {
-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
}
} @-moz-keyframes loadingWrap2_4 {
0% {
-moz-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-moz-transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius: 20px;
background: #e74c3c
} 80% {
-moz-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
} 100% {
-moz-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
}
} @-ms-keyframes loadingWrap2_1 {
0% {
-ms-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius: 20px;
background: #3498db
} 80% {
-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
} 100% {
-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
}
} @-ms-keyframes loadingWrap2_2 {
0% {
-ms-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);
border-radius: 20px;
background: #f1c40f
} 80% {
-ms-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
} 100% {
-ms-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
}
} @-ms-keyframes loadingWrap2_3 {
0% {
-ms-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius: 20px;
background: #2ecc71
} 80% {
-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
} 100% {
-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius: 0
}
} @-ms-keyframes loadingWrap2_4 {
0% {
-ms-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0
} 50% {
-ms-transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius: 20px;
background: #e74c3c
} 80% {
-ms-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
} 100% {
-ms-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius: 0
}
} @-keyframes loadingWrap2_1 {
0% {
-transform: translateX(0px)translateY(0px)rotate(0deg);
border-radius: 0px;
} 50% {
-transform: translateX(-20px)translateY(-10px)rotate(-180deg);
border-radius: 20px;
background: #3498db;
} 80% {
-transform: translateX(0px)translateY(0px)rotate(-360deg);
border-radius: 0px;
} 100% {
-transform: translateX(0px)translateY(0px)rotate(-360deg);
border-radius: 0px;
}
} @-keyframes loadingWrap2_2 {
0% {
-transform: translateX(0px)translateY(0px)rotate(0deg);
border-radius: 0px;
} 50% {
-transform: translateX(20px)translateY(-10px)rotate(180deg);
border-radius: 20px;
background: #f1c40f;
} 80% {
-transform: translateX(0px)translateY(0px)rotate(360deg);
border-radius: 0px;
} 100% {
-transform: translateX(0px)translateY(0px)rotate(360deg);
border-radius: 0px;
}
} @-keyframes loadingWrap2_3 {
0% {
-transform: translateX(0px)translateY(0px)rotate(0deg);
border-radius: 0px;
} 50% {
-transform: translateX(-20px)translateY(10px)rotate(-180deg);
border-radius: 20px;
background: #2ecc71;
} 80% {
-transform: translateX(0px)translateY(0px)rotate(-360deg);
border-radius: 0px;
} 100% {
-transform: translateX(0px)translateY(0px)rotate(-360deg);
border-radius: 0px;
}
} @-keyframes loadingWrap2_4 {
0% {
-transform: translateX(0px)translateY(0px)rotate(0deg);
border-radius: 0px;
} 50% {
-transform: translateX(20px)translateY(10px)rotate(180deg);
border-radius: 20px;
background: #e74c3c;
} 80% {
-transform: translateX(0px)translateY(0px)rotate(360deg);
border-radius: 0px;
} 100% {
-transform: translateX(0px)translateY(0px)rotate(360deg);
border-radius: 0px;
}
}
3、
<div id="loadingWrap3"></div>
#loadingWrap3 {
position: relative
}
#loadingWrap3:before {
width: 20px;
height: 20px;
border-radius: 20px;
background: blue;
content: '';
position: absolute;
background: #9b59b6;
-webkit-animation: loadingWrap3_before 1.5s infinite ease-in-out;
-moz-animation: loadingWrap3_before 1.5s infinite ease-in-out;
-ms-animation: loadingWrap3_before 1.5s infinite ease-in-out;
animation: loadingWrap3_before 1.5s infinite ease-in-out
}
#loadingWrap3:after {
width: 20px;
height: 20px;
border-radius: 20px;
background: blue;
content: '';
position: absolute;
background: #2ecc71;
left: 22px;
-webkit-animation: loadingWrap3_after 1.5s infinite ease-in-out;
-moz-animation: loadingWrap3_after 1.5s infinite ease-in-out;
-ms-animation: loadingWrap3_after 1.5s infinite ease-in-out;
animation: loadingWrap3_after 1.5s infinite ease-in-out
}
@-webkit-keyframes loadingWrap3_before {
0% {
-webkit-transform: translateX(0px) rotate(0deg)
}
50% {
-webkit-transform: translateX(50px) scale(1.2) rotate(260deg);
background: #2ecc71;
border-radius: 0
}
100% {
-webkit-transform: translateX(0px) rotate(0deg)
}
}
@-webkit-keyframes loadingWrap3_after {
0% {
-webkit-transform: translateX(0px)
}
50% {
-webkit-transform: translateX(-50px) scale(1.2) rotate(-260deg);
background: #9b59b6;
border-radius: 0
}
100% {
-webkit-transform: translateX(0px)
}
}
@-moz-keyframes loadingWrap3_before {
0% {
-moz-transform: translateX(0px) rotate(0deg)
}
50% {
-moz-transform: translateX(50px) scale(1.2) rotate(260deg);
background: #2ecc71;
border-radius: 0
}
100% {
-moz-transform: translateX(0px) rotate(0deg)
}
}
@-moz-keyframes loadingWrap3_after {
0% {
-moz-transform: translateX(0px)
}
50% {
-moz-transform: translateX(-50px) scale(1.2) rotate(-260deg);
background: #9b59b6;
border-radius: 0
}
100% {
-moz-transform: translateX(0px)
}
}
@-ms-keyframes loadingWrap3_before {
0% {
-ms-transform: translateX(0px) rotate(0deg)
}
50% {
-ms-transform: translateX(50px) scale(1.2) rotate(260deg);
background: #2ecc71;
border-radius: 0
}
100% {
-ms-transform: translateX(0px) rotate(0deg)
}
}
@-ms-keyframes loadingWrap3_after {
0% {
-ms-transform: translateX(0px)
}
50% {
-ms-transform: translateX(-50px) scale(1.2) rotate(-260deg);
background: #9b59b6;
border-radius: 0
}
100% {
-ms-transform: translateX(0px)
}
}
@keyframes loadingWrap3_before {
0% {
transform: translateX(0px) rotate(0deg)
}
50% {
transform: translateX(50px) scale(1.2) rotate(260deg);
background: #2ecc71;
border-radius: 0
}
100% {
transform: translateX(0px) rotate(0deg)
}
}
@keyframes loadingWrap3_after {
0% {
transform: translateX(0px)
}
50% {
transform: translateX(-50px) scale(1.2) rotate(-260deg);
background: #9b59b6;
border-radius: 0
}
100% {
transform: translateX(0px)
}
}
4、
<div id="loadingWrap4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> #loadingWrap4 {
position: relative
} #loadingWrap4 span {
position: absolute;
width: 20px;
height: 20px;
background: #3498db;
opacity: .5;
border-radius: 20px;
-webkit-animation: loadingWrap4 1s infinite ease-in-out;
-moz-animation: loadingWrap4 1s infinite ease-in-out;
-ms-animation: loadingWrap4 1s infinite ease-in-out;
-animation: loadingWrap4 1s infinite ease-in-out
} #loadingWrap4 span:nth-child(2) {
left:20px;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
animation-delay: .2s
} #loadingWrap4 span:nth-child(3) {
left:40px;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-ms-animation-delay: .4s;
animation-delay: .4s
} #loadingWrap4 span:nth-child(4) {
left:60px;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
animation-delay: .6s
} #loadingWrap4 span:nth-child(5) {
left:80px;
-webkit-animation-delay: .8s;
-moz-animation-delay: .8s;
-ms-animation-delay: .8s;
animation-delay: .8s
} @-webkit-keyframes loadingWrap4 {
0% {
opacity: .3;
-webkit-transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
} 50% {
opacity: 1;
-webkit-transform: translateY(-10px);
background: #f1c40f;
box-shadow: 0 20px 3px rgba(0,0,0,.05)
} 100% {
opacity: .3;
-webkit-transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
}
} @-moz-keyframes loadingWrap4 {
0% {
opacity: .3;
-moz-transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
} 50% {
opacity: 1;
-moz-transform: translateY(-10px);
background: #f1c40f;
box-shadow: 0 20px 3px rgba(0,0,0,.05)
} 100% {
opacity: .3;
-moz-transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
}
} @-ms-keyframes loadingWrap4 {
0% {
opacity: .3;
-ms-transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
} 50% {
opacity: 1;
-ms-transform: translateY(-10px);
background: #f1c40f;
box-shadow: 0 20px 3px rgba(0,0,0,.05)
} 100% {
opacity: .3;
-ms-transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
}
} @keyframes loadingWrap4 {
0% {
opacity: .3;
transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
} 50% {
opacity: 1;
transform: translateY(-10px);
background: #f1c40f;
box-shadow: 0 20px 3px rgba(0,0,0,.05)
} 100% {
opacity: .3;
transform: translateY(0px);
box-shadow: 0 0 3px rgba(0,0,0,.1)
}
}
5、
<div id="loadingWrap5"></div>
#loadingWrap5 {
position: relative;
width: 30px;
height: 30px;
background: #3498db;
border-radius: 50px;
-webkit-animation: loadingWrap5 1.5s infinite linear;
-moz-animation: loadingWrap5 1.5s infinite linear;
-ms-animation: loadingWrap5 1.5s infinite linear;
animation: loadingWrap5 1.5s infinite linear
}
#loadingWrap5:after {
position: absolute;
width: 50px;
height: 50px;
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 50px;
content: '';
top: -20px;
left: -20px;
-webkit-animation: loadingWrap5_after 1.5s infinite linear;
-moz-animation: loadingWrap5_after 1.5s infinite linear;
-ms-animation: loadingWrap5_after 1.5s infinite linear;
animation: loadingWrap5_after 1.5s infinite linear
}
@-webkit-keyframes loadingWrap5 {
0% {
-webkit-transform: rotate(0deg)
}
50% {
-webkit-transform: rotate(180deg);
background: #2ecc71
}
100% {
-webkit-transform: rotate(360deg)
}
}
@-webkit-keyframes loadingWrap5_after {
0% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
50% {
border-top: 10px solid #3498db;
border-bottom: 10px solid #3498db
}
100% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
}
@-moz-keyframes loadingWrap5 {
0% {
-moz-transform: rotate(0deg)
}
50% {
-moz-transform: rotate(180deg);
background: #2ecc71
}
100% {
-moz-transform: rotate(360deg)
}
}
@-moz-keyframes loadingWrap5_after {
0% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
50% {
border-top: 10px solid #3498db;
border-bottom: 10px solid #3498db
}
100% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
}
@-ms-keyframes loadingWrap5 {
0% {
-ms-transform: rotate(0deg)
}
50% {
-ms-transform: rotate(180deg);
background: #2ecc71
}
100% {
-ms-transform: rotate(360deg)
}
}
@-ms-keyframes loadingWrap5_after {
0% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
50% {
border-top: 10px solid #3498db;
border-bottom: 10px solid #3498db
}
100% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
}
@keyframes loadingWrap5 {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(180deg);
background: #2ecc71
}
100% {
transform: rotate(360deg)
}
}
@keyframes loadingWrap5_after {
0% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
50% {
border-top: 10px solid #3498db;
border-bottom: 10px solid #3498db
}
100% {
border-top: 10px solid #9b59b6;
border-bottom: 10px solid #9b59b6
}
}
6、
<div id="loadingWrap6">
<span></span>
<span></span>
<span></span>
<span></span>
</div> #loadingWrap6 {
position: relative;
width: 42px;
height: 42px;
-webkit-animation: loadingWrap6 5s infinite linear;
-moz-animation: loadingWrap6 5s infinite linear;
-ms-animation: loadingWrap6 5s infinite linear;
animation: loadingWrap6 5s infinite linear
} #loadingWrap6 span {
width: 20px;
height: 20px;
position: absolute;
background: red;
display: block;
-webkit-animation: loadingWrap6_span 1s infinite linear;
-moz-animation: loadingWrap6_span 1s infinite linear;
-ms-animation: loadingWrap6_span 1s infinite linear;
animation: loadingWrap6_span 1s infinite linear
} #loadingWrap6 span:nth-child(1) {
background:#2ecc71
} #loadingWrap6 span:nth-child(2) {
left:22px;
background: #9b59b6;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
animation-delay: .2s
} #loadingWrap6 span:nth-child(3) {
top:22px;
background: #3498db;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-ms-animation-delay: .4s;
animation-delay: .4s
} #loadingWrap6 span:nth-child(4) {
top:22px;
left: 22px;
background: #f1c40f;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
animation-delay: .6s
} @-webkit-keyframes loadingWrap6 {
from {
-webkit-transform: rotate(0deg)
} to {
-webkit-transform: rotate(360deg)
}
} @-webkit-keyframes loadingWrap6_span {
0% {
-webkit-transform: scale(1)
} 50% {
-webkit-transform: scale(.5)
} 100% {
-webkit-transform: scale(1)
}
} @-moz-keyframes loadingWrap6 {
from {
-moz-transform: rotate(0deg)
} to {
-moz-transform: rotate(360deg)
}
} @-moz-keyframes loadingWrap6_span {
0% {
-moz-transform: scale(1)
} 50% {
-moz-transform: scale(.5)
} 100% {
-moz-transform: scale(1)
}
} @-ms-keyframes loadingWrap6 {
from {
-ms-transform: rotate(0deg)
} to {
-ms-transform: rotate(360deg)
}
} @-ms-keyframes loadingWrap6_span {
0% {
-ms-transform: scale(1)
} 50% {
-ms-transform: scale(.5)
} 100% {
-ms-transform: scale(1)
}
} @-ms-keyframes loadingWrap6 {
from {
-ms-transform: rotate(0deg)
} to {
-ms-transform: rotate(360deg)
}
} @keyframes loadingWrap6_span {
0% {
transform: scale(1)
} 50% {
transform: scale(.5)
} 100% {
transform: scale(1)
}
}
6种纯css实现loading效果的更多相关文章
- 纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- 10种CSS3实现的Loading效果
原文链接:http://www.cnblogs.com/jr1993/p/4622039.html 第一种效果: 代码如下: <div class="loading"> ...
- 纯css实现幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- 纯css实现打字效果
概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...
- IE7,8纯css实现圆角效果
众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...
随机推荐
- [算法] 举一反三之n重复数组中找唯一m重复异类数
n重复数组,是指数组中的数字都出现n次: 唯一m重复异类数,是指存在唯一一个没出现n次,只出现了m次的数: 这里我简记它为nX+my问题,求解y,其中m < n,数组中都是整数: 3X+y问题 ...
- python接口自动化-接口重定向和编码格式
1.如果测试的接口重定向,那么只需添加allow_redirects=False禁止重定向就可: 2.如果请求的结果,中文出现没有解码 \xe9\x83\xad\xe7\xbf\xa0\xe6\x99 ...
- 论文笔记【四】Semi-supervised Word Sense Disambiguation with Neural Models
基于神经模型的半监督词义消歧 Dayu Yuan Julian Richardson Ryan Doherty Colin Evans Eric Altendorf Google, Mount ...
- Linux 链路聚合
Linux 链路聚合 链路聚合与双网卡绑定几乎相同,可以实现多网卡绑定主从荣誉,负载均衡,提高网络访问流量.但链路聚合与双网卡绑定技术(bond)不同点就在于,双网卡绑定只能使用两个网卡绑定,而链路聚 ...
- Pandas数据处理+Matplotlib绘图案例
利用pandas对数据进行预处理然后再使用matplotlib对处理后的数据进行数据可视化是数据分析中常用的方法. 第一组例子(星巴克咖啡店) 假如我们现在有这样一组数据:星巴克在全球的咖啡店信息,如 ...
- SPOJ 375 QTREE - Query on a tree
思路 注意本题只能用C,不能用C++ 其他的都和上一题一样 代码 #include <stdio.h> #include <string.h> #define MAXN 100 ...
- 论文笔记：SiamRPN++: Evolution of Siamese Visual Tracking with Very Deep Networks
SiamRPN++: Evolution of Siamese Visual Tracking with Very Deep Networks 2019-04-02 12:44:36 Paper:ht ...
- mongodb常用的sql语句总结
本文为博主原创,转载请注明出处: 1 . 查询所有 db.getCollection('CollectionName').find() 2.根据条件查询 db.getCollection('Coll ...
- kubernetes1.13.5安装部署
Kubernetes 一. Kubernetes介绍 各节点所需组件 Master:docker,kubeadm,kubelet, 组件 版本 备注 Kubelet 1.13.5 组件 Kube ...
- [转]C# winform与Javascript的相互调用
C# winform与Javascript的相互调用 <html> <head> <meta http-equiv="Content-Language" ...