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= ...
随机推荐
- SQL并发处理方案——乐观锁和悲观锁
(一)乐观锁和悲观锁的概念 悲观锁 在关系数据库管理系统里,悲观并发控制(又名“悲观锁”,Pessimistic Concurrency Control,缩写“PCC”)是一种并发控制的方法.它可以阻 ...
- IDEA Failed to load dx.jar
IDEA-177053 Android app crashes on build "Failed to load dx.jar" Error:Android Pre Dex: [c ...
- docker组件介绍
一.Docker Client and Daemon(docker egine docker 引擎) docker是一个客户端工具,作用是发送 用户的请求给 dockerd 安装路径: /usr/bi ...
- pyautogui
pip install PyGetWindow==0.0.1 pip install pyautogui https://www.cnblogs.com/dcb3688/p/4607980.html
- Dio添加Cookie
在使用Options添加headers时,Map没有定义内部类型: Dio dio = new Dio(); Map headers = new Map(); headers['Cookie'] = ...
- Thuwc 2019 & wc 2019 划水记
(此处不应有目录,爆零的过程应该慢慢看) Thuwc 2019 拖着箱子去广二,然后发现可以搬出去住酒店.好,然后箱子白搬了.Joker似乎说住宿体验极差,广二宿舍和林荫宿舍质量不相上下,想想wc时要 ...
- hello2代码的简单分析
hello2部分代码: String username = request.getParameter("username");//将get~这个方法赋给username这个对象 i ...
- ASP.NET - Validators
ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or ...
- [java] 软工实践WordCount-Plus
整体思路 模块化 对于任何一个小模块,例如:输入.输出.计算都独立开来,降低耦合. 插件化 对于任何一个模块均作成插件,可拔插,可更换,而不会导致其他的插件出现故障. 事件驱动 使用观察者模式,用事件 ...
- Windows server 2012 install .net core sdk 2.2.103
Windows8.1-KB2919442-x64 Windows8.1-KB2919355-x64 vc_redist.x64 dotnet-sdk-2.2.103-win-x64 dotnet-ho ...