今天也是用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>