NNNの博客

加载旋转二

今天也是用css动画来完成一个加载转圈效果哦~感觉比上次加载旋转的效果棒多了,哈哈,body颜色也是喜欢的颜色~不多说,下面上css代码,就是用css动画来完成的~

<style style="text/css">
    body{
        margin: 0;
        background:rgb(13,206,203)
    }
    div{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color:transparent;
        margin: 200px auto;
        animation-name: turn;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;      
    }
    @keyframes turn{
        0%,100%{box-shadow: 0 -50px 0 rgb(215,246,246),35.25px -35.25px rgb(167,237,236),rgb(61,214,212),
        -50px 0 rgb(61,214,212), -35.25px -35.25px rgb(167,237,236);            }
        12.5%{box-shadow: 0 -50px rgb(167,237,236),35.25px -35.25px rgb(215,246,246),50px 0 rgb(167,237,236),                35.25px 35.25px rgb(61,214,212),0 50px rgb(61,214,212),-35.250px 35.250px rgb(61,214,212),-50px 0                 rgb(61,214,212),-35.25px -35.25px rgb(61,214,212);}
        25%{box-shadow: 0 -50px rgb(61,214,212),35.25px -35.25px rgb(167,237,236),50px 0 rgb(215,246,246),                35.25px 35.25px rgb(167,237,236),0 50px rgb(61,214,212),-35.250px 35.250px rgb(61,214,212),
            -50px 0 rgb(61,214,212),-35.25px -35.25px rgb(61,214,212);}
        37.5%{box-shadow: 0 -50px rgb(61,214,212),35.25px -35.25px rgb(61,214,212),50px 0 rgb(167,237,236),                35.25px 35.25px rgb(215,246,246),0 50px rgb(167,237,236),-35.250px 35.250px rgb(61,214,212),
            -50px 0 rgb(61,214,212),-35.25px -35.25px rgb(61,214,212);}
        50%{box-shadow: 0 -50px rgb(61,214,212),35.25px -35.25px rgb(61,214,212),50px 0 rgb(61,214,212),35.25px                 35.25px rgb(167,237,236),0 50px rgb(215,246,246),-35.250px 35.250px rgb(167,237,236),
            -50px 0 rgb(61,214,212),-35.25px -35.25px rgb(61,214,212);}
        62.5%{box-shadow: 0 -50px rgb(61,214,212),35.25px -35.25px rgb(61,214,212),50px 0 rgb(61,214,212),                35.25px 35.25px rgb(61,214,212),0 50px rgb(167,237,236),-35.250px 35.250px rgb(215,246,246),
            -50px 0 rgb(167,237,236),-35.25px -35.25px rgb(61,214,212);}
        75%{box-shadow: 0 -50px rgb(61,214,212),35.25px -35.25px rgb(61,214,212),50px 0 rgb(61,214,212),35.25px                 35.25px rgb(61,214,212),0 50px rgb(61,214,212),-35.250px 35.250px rgb(167,237,236),
            -50px 0 rgb(215,246,246),-35.25px -35.25px rgb(167,237,236);}
        87.5%{box-shadow: 0 -50px rgb(167,237,236),35.25px -35.25px rgb(61,214,212),50px 0 rgb(61,214,212),                    35.25px 35.25px rgb(61,214,212),0 50px rgb(61,214,212),-35.250px 35.250px rgb(61,214,212),
            -50px 0 rgb(167,237,236),-35.25px -35.25px rgb(215,246,246);}
    </style>

神奇的css,哈哈~