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= ...
随机推荐
- 要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10;
package text1; import java.util.ArrayList; import java.util.HashSet; /* * 要求产生10个随机的字符串, * 每一个字符串互相不 ...
- react --- 搭建环境
搭建react开发环境的准备工作 1. node.js 稳定版本 2. 安装cnpm,用cnpm代替npm 3. 用yarn替代npm yarn的安装:npm install -g yarn 搭建re ...
- 【题解】Luogu P2347 砝码称重
正经·DP题解 一道非常好的背包练手题( sto(注:原思路来源 SLYZ_0120 的题解)orz 开始这道题 1.输入六个数,存进数组中 2.初始化 f 数组为0. f [ i ] 表示重量为 i ...
- 多线程校验url的种种。。。
东西不经常看就容易忘,这两天抽空写了一个补丁库url验证工具,挺曲折的,记录一下需求大概流程如下:转换补丁库为xml,解析xml得到所有url,多线程校验url.就不到100行有效代码,断断续续写了三 ...
- EECS 649 Introduction to Artificial Intelligence
EECS 649 Introduction to Artificial IntelligenceExamElectronic Blackboard Submission Due: April 24, ...
- 【做题】POI2011R1 - Plot——最小圆覆盖&倍增
原文链接 https://www.cnblogs.com/cly-none/p/loj2159.html 题意:给出\(n\)个点,你需要按编号将其划分成不超过\(m\)段连续的区间,使得所有每个区间 ...
- 20175312 2018-2019-2 《Java程序设计》第8周学习总结
20175312 2018-2019-2 <Java程序设计>第8周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第十章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...
- HDU 3948 The Number of Palindromes（Manacher+后缀数组）
题意 求一个字符串中本质不同的回文子串的个数. $ 1\leq |string| \leq 100000$ 思路 好像是回文自动机的裸题,但是可以用 \(\text{Manacher}\) (马拉车) ...
- UVA - 11468 (AC自动机+动态规划)
建立AC自动机,把AC自动机当做一张图,在上面跑L个节点就行了. 参考了刘汝佳的代码,发现可能有一个潜在的Bug--如果模式串中出现了没有指定的字符,AC自动机可能会建立出错. 提供一组关于这个BUG ...
- Reids 持久化AOF 重写实现原理
AOF重写 AOF重写并不需要对原有AOF文件进行任何的读取,写入,分析等操作,这个功能是通过读取服务器当前的数据库状态来实现的.(auto-aof-rewrite-percentage和auto-a ...