Css3 makes a rotating windmill

When I first learned that css3 could be used as an animation, I really wanted to play it, so I made a big windmill full of childhood memories.

 

HTML:

 <  Div  Class  = "Windmill"  >  <  Div  Class  = "Red"  > </  Div  >  <  Div  Class = "Yellow"  > </  Div  >  <  Div  Class  = "Blue"  > </  Div  >  <  Div  Class  = "Green"  > </  Div >  <  Div  Class  = "Dot"  > </  Div  >  </  Div  > 

Implementation process: first, four fans in a container and a central point structure are simple. The positions are definitely set separately. Then, use border-radius to convert the fan rectangle into a semi-circle, and then color the shape separately. The four gradient colors are red, yellow, blue, and green. AddAnimationMake the entire container start to rotate.

CSS:

 . Windmill {
Padding: 10px; width: 400px; Height: 400px; position: relative; Animation -Name: movewindmill; Animation - Duration: 4 s; Animation -Timing-function: linearanimation-delay: 0  ; Animation -Iteration- Count: infinite; Animation -Play- State: running;  /*  Animation:  */ -Moz-animation- Name: movewindmill; -Moz-animation- Duration: 4 s; -Moz-animation-timing- Function: Linear; -Moz-animation-delay: 0  ; -Moz-animation-iteration- Count: infinite; -Moz-animation-play- State: running; -WebKit-animation- Name: movewindmill; -WebKit-animation- Duration: 4 s; -WebKit-animation-timing- Function: Linear; -WebKit-animation-delay: 0  ; -WebKit-animation-iteration- Count: infinite; -WebKit-animation-play-State: running; -MS-animation- Name: movewindmill; -MS-animation- Duration: 4 s; -MS-animation-timing- Function: Linear; -MS-animation-delay: 0  ; -MS-animation-iteration- Count: infinite; -MS-animation-play- State: running;}. windmill Div {position: absolute; width: 100px; Height: 50px; left:  50 %; Top: 50 %; Border-radius: 0  0 50px 50px;-moz-transform-origin: 0 % 0 %;-WebKit-transform-origin: 0 % 0 %;-MS-transform-origin: 0 % 0 % ;}. Windmill. Red {background -Color: red; Background:-moz-radial-gradient (right, circle, Red ,# 000  ); Background: -WebKit-radial-gradient (right, circle, Red ,# 000 );}. Windmill. Yellow {transform: Rotate (90deg ); -MS-transform: Rotate (90deg);-moz-transform: Rotate (90deg);-WebKit-transform: Rotate (90deg); background-color: yellow; Background: -Moz-radial-gradient (right, circle, yellow ,# 000 ); Background:-WebKit-radial-gradient (right, circle, yellow ,# 000 ); Background:-MS-radial-gradient (right, circle, yellow ,# 000  );}. Windmill. Blue {transform: Rotate (180deg ); -MS-transform: Rotate (180deg);-moz-transform: Rotate (180deg);-WebKit-transform: Rotate (180deg); background-color: Blue; Background: -Moz-radial-gradient (right, circle, Blue ,# 000 ); Background:-WebKit-radial-gradient (right, circle, Blue ,# 000  );}. Windmill. Green {transform: Rotate (270deg ); -MS-transform: Rotate (270deg);-moz-transform: Rotate (270deg);-WebKit-transform: Rotate (270deg); background-color: green; Background: radial-gradient (right, circle, green ,# 000 ); Background:-moz-radial-gradient (right, circle, green ,# 000 ); Background:-WebKit-radial-gradient (right, circle, green ,# 000 ); Background:-MS-radial-gradient (right, circle, green ,# 000  );} 

 . Windmill. Dot {width: 50px; Height: 50px; Border -Radius: 50px; position: absolute; left: 50 %; Top: 50 %; Margin-left:-25px; margin-top:-25px; Background: # FFF; Background:-moz-radial-gradient (center, circle, # fff ,# 666 ); Background:-WebKit-radial-gradient (center, circle, # fff ,# 666  ) ;}@ Keyframes movewindmill  /*  Firefox  */  {  0 % {-MS- Transform: Rotate (0deg )} 25 % {-MS- Transform: Rotate (90deg )}  50 % {-MS- Transform: Rotate (180deg )}  75 % {-MS- Transform: Rotate (270deg )}  100 % {-MS- Transform: Rotate (360deg )}}@ -MS-keyframes movewindmill /*  MS  */  {  0 % {-MS-Transform: Rotate (0deg )}  25 % {-MS- Transform: Rotate (90deg )}  50 % {-MS- Transform: Rotate (180deg )}  75 % {-MS- Transform: Rotate (270deg )}  100 % {-MS- Transform: Rotate (360deg )}}@ -WebKit-keyframes movewindmill /* WebKit */   
{

 0 % {-WebKit- Transform: Rotate (0deg )}

  25 % {-WebKit- Transform: Rotate (90deg )}

  50 % {-WebKit- Transform: Rotate (180deg )}

  75 % {-WebKit- Transform: Rotate (270deg )}

  100 % {-WebKit- Transform: Rotate (360deg )}}

@ -Moz-keyframes movewindmill /*  Firefox */   
{
  0 % {-Moz- Transform: Rotate (0deg )}
  25 % {-Moz- Transform: Rotate (90deg )}
  50 % {-Moz- Transform: Rotate (180deg )}
  75 % {-Moz- Transform: Rotate (270deg )}
  100 % {-Moz- Transform: Rotate (360deg )}
}