CSS3 + 伪类实现加载动画
实现效果
<code>
.animsition-loading {
position: fixed;
top: 50%;
width: 100%;
font-size: 24px;
text-align: center;
opacity: 0;
-webkit-animation-name: blink-slow;
-o-animation-name: blink-slow;
animation-name: blink-slow;
-webkit-animation-duration: .3s;
-o-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animsition-loading:after {
display: inline-block;
content: "";
width: 36px !important;
height: 36px !important;
-webkit-animation: rotation .8s infinite linear;
-moz-animation: rotation .8s infinite linear;
-o-animation: rotation .8s infinite linear;
animation: rotation .8s infinite linear;
border-left: 3px solid rgba(87,164,164,.15);
border-right: 3px solid rgba(87,164,164,.15);
border-bottom: 3px solid rgba(87,164,164,.15);
border-top: 3px solid rgba(87,164,164,.8);
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(359deg)
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(359deg)
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg)
}
to {
-o-transform: rotate(359deg)
}
}
@keyframes rotation {
from {
transform: rotate(0deg)
}
to {
transform: rotate(359deg)
}
}
</code>
.animsition-loading {
position: fixed;
top: 50%;
width: 100%;
font-size: 24px;
text-align: center;
opacity: 0;
-webkit-animation-name: blink-slow;
-o-animation-name: blink-slow;
animation-name: blink-slow;
-webkit-animation-duration: .3s;
-o-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animsition-loading:after {
display: inline-block;
content: "";
width: 36px !important;
height: 36px !important;
-webkit-animation: rotation .8s infinite linear;
-moz-animation: rotation .8s infinite linear;
-o-animation: rotation .8s infinite linear;
animation: rotation .8s infinite linear;
border-left: 3px solid rgba(87,164,164,.15);
border-right: 3px solid rgba(87,164,164,.15);
border-bottom: 3px solid rgba(87,164,164,.15);
border-top: 3px solid rgba(87,164,164,.8);
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(359deg)
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(359deg)
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg)
}
to {
-o-transform: rotate(359deg)
}
}
@keyframes rotation {
from {
transform: rotate(0deg)
}
to {
transform: rotate(359deg)
}
}
</code>