CSS - 缓冲动画样式

html 代码

<div class="preloader">
    <div class="zgroup">
        <div class="bigSqr">
            <div class="square first"></div>
            <div class="square second"></div>
            <div class="square third"></div>
            <div class="square fourth"></div>
        </div>
    </div>
    <p>...</p>
</div>

css 代码
.preloader{margin:86px 0;text-align:center;}
.preloader p{font-size:1.2em;margin-top:20px;text-align:center;}
.zgroup{line-height:16px;}
.bigSqr,.zgroup{position:relative;display:inline-block;}
.bigSqr{width:40px;height:40px;overflow:hidden;-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-animation:bigSqrShrink 1s linear infinite;animation:bigSqrShrink 1s linear infinite;}
.square{position:absolute;width:20px;height:20px;background:#cf6;}
.first{left:0;top:20px;}
.second{left:20px;top:20px;-webkit-animation:drop2 1s linear infinite;animation:drop2 1s linear infinite;}
.third{left:0;top:0;-webkit-animation:drop3 1s linear infinite;animation:drop3 1s linear infinite;}
.fourth{left:20px;top:0;-webkit-animation:drop4 1s linear infinite;animation:drop4 1s linear infinite;}
@-webkit-keyframes bigSqrShrink{0%{-webkit-transform:scale(1);transform:scale(1);}90%{-webkit-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(.5);transform:scale(.5);}}
@keyframes bigSqrShrink{0%{-webkit-transform:scale(1);transform:scale(1);}90%{-webkit-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(.5);transform:scale(.5);}}
@-webkit-keyframes drop2{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}25%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop2{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}25%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@-webkit-keyframes drop3{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}50%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop3{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}50%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@-webkit-keyframes drop4{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}75%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop4{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}75%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
demo

参考

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论