CSS3 + 伪类 加载动画

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>

0 thoughts on “CSS3 + 伪类 加载动画
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。