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= ...
随机推荐
- Java RSA 公钥加密私钥解密
package com.lee.utils; import java.io.DataInputStream; import java.io.File; import java.io.FileInput ...
- 简易轮播图、内含定时器。熟练JS操作
HTML部分: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF ...
- LeetCode 链表2_27+二叉树的遍历（递归与非递归）
---恢复内容开始--- 19. 删除链表的倒数第N个节点 实现原理:设置两个指针p,q,初始时先让p走n步,之后p与q一起走,当p走到结尾的时候,删除p.next即可. public ListNod ...
- 对八皇后的补充以及自己解决2n皇后问题代码
有了上次的八皇后的基础.这次准备解决2n皇后的问题,: //问题描述// 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后,使任意的两个黑皇后都不在同一行./ ...
- JZ2440学习笔记之第一个裸机程序(Keil-MDK)
CPU:S3C2440, ARM920T, Internal 4KB RAM, Support boot from NAND flash, 128MB for each bank. JZ2440:Me ...
- C 语言多线程与锁机制
C 语言多线程与锁机制 多线程 #include <pthread.h> void *TrainModelThread(void *id) { ... pthread_exit(NULL) ...
- Vue中使用Cropper.js裁剪图片
Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuan ...
- 不能最为IF判断条件的属性
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- 提高组noip2015
一道二分答案裸题,一道dp,一道各种裸题的混合(树上差分+二分答案+LCA) stone: 二分查找裸题啊: int check(int x) { ,last=; ;i<=n;i++) if(a ...
- vue+vux页面滚动定位(支持上下滑动)
接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚 ...