【每日一学】用css3玩转loading动画

作者：天空2016.12.22来源：Web前端之家浏览：12987评论:0

关键词：css3 loading 动画

今天用css3实现loading，做下笔记，方便后面记住了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>loading</title>
        <style>
            .container{width: 300px;height: 300px;position: relative;margin:50px auto;}
            .circle{width: 100px;height: 100px;position: absolute;border-radius: 50%;}
            #one{left: 0;top: 0;background:#f00;animation: move1 2s ease-in-out infinite;
            -webkit-animation: move1 2s ease-in-out infinite;/*infinite动画无限播放*/
            -moz-animation: move1 2s ease-in-out infinite;
            -ms-animation: move1 2s ease-in-out infinite;
            }
            #two{right: 0;top: 0;background:#000;animation: move2 2s ease-in-out infinite;
            -webkit-animation: move2 2s ease-in-out infinite;/*infinite动画无限播放*/
            -moz-animation: move2 2s ease-in-out infinite;
            -ms-animation: move2 2s ease-in-out infinite;
            }
            
            #three{left: 0;bottom: 0;background:blue;animation: move3 2s ease-in-out infinite;
            -webkit-animation: move3 2s ease-in-out infinite;/*infinite动画无限播放*/
            -moz-animation: move3 2s ease-in-out infinite;
            -ms-animation: move3 2s ease-in-out infinite;
            }
                #four{right: 0;bottom: 0;background:yellow;animation: move4 2s ease-in-out infinite;
            -webkit-animation: move4 2s ease-in-out infinite;/*infinite动画无限播放*/
            -moz-animation: move4 2s ease-in-out infinite;
            -ms-animation: move4 2s ease-in-out infinite;
            }
            /*动画*/
            @keyframes move1{
                0%{transform: translate(0,0)}
                50%{transform: translate(200px,200px)}
                100%{transform: translate(0,0)}
            }
        -webkit-@keyframes move1{
                0%{transform: translateX(0) translateY(0)}
                50%{transform: translateX(200px) translateY(200px)}
                100%{transform: translateX(0) translateY(0)}
            }
            
                @keyframes move2{
                0%{transform: translate(0,0)}
                50%{transform: translate(-200px,200px)}
                100%{transform: translate(0,0)}
            }
        -webkit-@keyframes move2{
                0%{transform: translateX(0) translateY(0)}
                50%{transform: translateX(-200px) translateY(200px)}
                100%{transform: translateX(0) translateY(0)}
            }
                    @keyframes move3{
                0%{transform: translate(0,0)}
                50%{transform: translate(200px,-200px)}
                100%{transform: translate(0,0)}
            }
        -webkit-@keyframes move3{
                0%{transform: translateX(0) translateY(0)}
                50%{transform: translateX(200px) translateY(-200px)}
                100%{transform: translateX(0) translateY(0)}
            }
            
            @keyframes move4{
                0%{transform: translate(0,0)}
                50%{transform: translate(-200px,-200px)}
                100%{transform: translate(0,0)}
            }
        -webkit-@keyframes move4{
                0%{transform: translateX(0) translateY(0)}
                50%{transform: translateX(-200px) translateY(-200px)}
                100%{transform: translateX(0) translateY(0)}
            }
            -o-@keyframes move4{
                0%{transform: translateX(0) translateY(0)}
                50%{transform: translateX(-200px) translateY(-200px)}
                100%{transform: translateX(0) translateY(0)}
            }
            -ms-@keyframes move4{
                0%{transform: translateX(0) translateY(0)}
                50%{transform: translateX(-200px) translateY(-200px)}
                100%{transform: translateX(0) translateY(0)}
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="circle" id="one"></div>
            <div class="circle" id="two"></div>
            <div class="circle" id="three"></div>
            <div class="circle" id="four"></div>
        </div>
    </body>
</html>

赏您的支持是我们创作的动力！