CSS中怎么实现圆环旋转加载动画

这篇文章给大家介绍CSS中怎么实现圆环旋转加载动画,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

铁门关网站建设公司创新互联建站,铁门关网站设计制作,有大型网站制作公司丰富经验。已为铁门关成百上千提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱,请找那个售后服务好的铁门关做网站的公司定做!

  1. #loader8 {     

  2.   margin: 30px 50px;     

  3.   float: left;     

  4.   font-size: 10px;     

  5.   position: relative;     

  6.   text-indent: -9999em;     

  7.   border-top: 1.1em solid rgba(255, 128, 0, 0.2);     

  8.   border-right: 1.1em solid rgba(255, 128, 0, 0.2);     

  9.   border-bottom: 1.1em solid rgba(255, 128, 0, 0.2);     

  10.   border-left: 1.1em solid rgba(255, 128, 0, 1);     

  11.   -webkit-animation: load8 1.1s infinite linear;     

  12.   animation: load8 1.1s infinite linear;     

  13. }     

  14. #loader8,     

  15. #loader8:after {     

  16.   border-radius: 50%;     

  17.   width: 10em;     

  18.   height: 10em;     

  19. }     

  20. @-webkit-keyframes load8 {     

  21.   0% {     

  22.     -webkit-transform: rotate(0deg);     

  23.     transform: rotate(0deg);     

  24.   }     

  25.   100% {     

  26.     -webkit-transform: rotate(360deg);     

  27.     transform: rotate(360deg);     

  28.   }     

  29. }     

  30. @keyframes load8 {     

  31.   0% {     

  32.     -webkit-transform: rotate(0deg);     

  33.     transform: rotate(0deg);     

  34.   }     

  35.   100% {     

  36.     -webkit-transform: rotate(360deg);     

  37.     transform: rotate(360deg);     

  38.   }     

  39. }     

  40.   

关于CSS中怎么实现圆环旋转加载动画就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


本文题目:CSS中怎么实现圆环旋转加载动画
网页URL:http://scyanting.com/article/jssocp.html