360度不停旋转的10片叶子背景---纯css实现旋转背景

来源：互联网发布：手机看网络电视流量编辑：程序博客网时间：2024/06/05 11:42

360度不断旋转动画

html代码：

<div id="loading">  <div class="color1"></div>  <div class="color1"></div>  <div class="color1"></div>  <div class="color1"></div>  <div class="color1"></div>  <div class="color2"></div>  <div class="color2"></div>  <div class="color2"></div>  <div class="color2"></div>  <div class="color2"></div></div>

css代码：

body{  background:#000;}.color1{  background:#FDE515;}.color2{  background:#00DEF2;}@-webkit-keyframes loadRotate{  from{    -webkit-transform:rotateZ(0deg);  }  to{    -webkit-transform:rotateZ(360deg);  }}@keyframes loadRotate{  from{    transform:rotateZ(0deg);  }  to{    transform:rotateZ(360deg);  }}#loading{  width:100px;  height:100px;  position:absolute;  left:50%;  top:50%;  margin-left:-50px;  margin-top:-50px;  -webkit-animation:loadRotate 3s linear infinite;  -webkit-animation-fill-mode:both;  animation:loadRotate 3s linear infinite;  /*动画从头到尾的速度是相同的  liner*/  /*指定动画应该播放无限次（永远）*/  animation-fill-mode:both;  /*动画结束前和结束后都应用该属性 animation-fill-mode:both; */}#loading div{  width:20px;  height:30px;  position:absolute;  left:40px;  top:35px;  -webkit-transform:rotateZ(0) translateX(60px);  opacity:1;  border-radius:50% 0;}#loading div:nth-child(2){  -webkit-transform:rotateZ(36deg) translateX(60px);  opacity:0.8;}#loading div:nth-child(3){  -webkit-transform:rotateZ(72deg) translateX(60px);  opacity:0.6;}#loading div:nth-child(4){  -webkit-transform:rotateZ(108deg) translateX(60px);  opacity: 0.4;}#loading div:nth-child(5){  -webkit-transform:rotateZ(144deg) translateX(60px);  opacity:0.2;}#loading div:nth-child(6){  -webkit-transform:rotateZ(180deg) translateX(60px);  opacity:1;}#loading div:nth-child(7){  -webkit-transform:rotateZ(216deg) translateX(60px);  opacity:0.8;}#loading div:nth-child(8){  -webkit-transform:rotateZ(252deg) translateX(60px);  opacity:0.6;}#loading div:nth-child(9){  -webkit-transform:rotateZ(288deg) translateX(60px);  opacity:0.4;}#loading div:nth-child(10){  -webkit-transform:rotateZ(324deg) translateX(60px);  opacity:0.2;}

0 0