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= ...
随机推荐
- postgresql 自定义函数
CREATE OR REPLACE FUNCTION "public"."pm25_aqi"("pm25_nd" numeric) RETU ...
- zigbee 安全通信加密链接密钥
---恢复内容开始--- #define KEY_TYPE_TC_MASTER 0 // Trust Center Master Key信任中心主密钥#define KEY_TYPE_ ...
- CentOS 7安装mysql(rpm)
1.检查是否安装了mysql rpm -qa|grep -i mysql centos7默认是安装的mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb 2 ...
- 比较两个Date类型的数据相差几年
package com.utils; import java.text.DecimalFormat; import java.text.ParseException; import java.text ...
- Oracle SQL语句之常见优化方法总结--不定更新
1.SQL语句尽量用大写的: 因为oracle总是先解析SQL语句,把小写的字母转换成大写的再执行. 2.WHERE子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理, ...
- jmeter的新增函数说明
本文算是对<零成本实现Web性能测试:基于Apache JMeter>中的<详解JMeter函数和变量>进行狗尾续貂哈,因为最近版本的jmeter增加了几个新函数,在原书中没有 ...
- 【题解】Luogu P4438 [HNOI/AHOI2018]道路
原题传送门 实际就是一道简单的树形dp 设f[u][i][j]表示从根结点到结点u经过i条未翻修公路,j条未翻修铁路的贡献最小值 边界条件:f[leaf][i][j]=(A+i)(B+j)C (题目上 ...
- 【转载】opencv实现人脸检测
全文转载自CSDN的博客(不知道怎么将CSDN的博客转到博客园,应该没这功能吧,所以直接复制全文了),转载地址如下 http://blog.csdn.net/lsq2902101015/article ...
- Unity 2018.2.8 旧版本安装包和破解软件
声明:本文所提供的所有软件均来自于互联网,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 最近Unity官网下载的旧版本,都无法正常破解.此链接有之前下载的离线安装包 ...
- Python_Runoob
python复合赋值 # Fibonacci series: 斐波纳契数列 # 两个元素的总和确定了下一个数 a, b = 0, 1 while b < 10: print(b) a, b = ...