Controllable speed CSS3 Rotating windmill effect

Used to make Web animation generally use JavaScript, now there are more and more animation using pure CSS implementation, and animation control can also be implemented using CSS3, because the CSS is the same, CSS 3 animation function is really powerful. The following is a pure CSS3 produced by the windmill rotation animation, but also with the CSS 3 control speed.

Experience Effect:
http://hovertree.com/texiao/css3/40/

：


Can see, the blade of the windmill is a triangle, use CSS to draw a variety of graphics please refer to:
Http://hovertree.com/h/bjaf/jtkqnsc1.htm

Http://hovertree.com/h/bjaf/ltgc20vn.htm

CSS animation is using the animation property, please refer to:
Http://hovertree.com/h/bjaf/i309b77d.htm

Http://hovertree.com/h/bjaf/fwck53gt.htm

Http://hovertree.com/h/bjaf/xpxgjfap.htm

Http://hovertree.com/h/bjaf/kqud99m6.htm

The rotation of the blades is used in the Transform property, refer to:
Http://hovertree.com/h/bjaf/c3bshswk.htm

Http://hovertree.com/h/bjaf/lxsexx3m.htm

This example uses the selector for CSS 3, Nth-of-type, for reference:
Http://hovertree.com/h/bjaf/c2c0k0tf.htm

The code for this example is given below:

<! DOCTYPE html>


CSS file code:



*{margin:0; padding:0;} Body{background: #eee; width:100%; height:100%;}.    wrapper{position:relative;    width:800px;    height:450px; margin:60px auto 0;}.    Wrapper. pin-layout{Position:absolute;    bottom:0;    Left:calc (50%-20px);    width:40px; height:280px;}.    Wrapper. pin-layout::after{Position:absolute;    bottom:0;    Left:calc (50%-20px);    Content: "";    height:0;    width:10px;    border-width:0px 15px 280px 15px;    Border-style:solid; Border-color:transparent transparent #6B3500 transparent;}.    Wrapper. Pin-layout. pillar{Position:absolute;    Top: -18px;    Left:calc (50%-18px);    width:36px;    height:36px;    Z-index:9;    Transform:rotatez (45DEG);    Transition:all. 9s linear; Animation:hovertreespin 3s linear 0s infinite;}.    Pin-layout. control:hover::after{Position:absolute;    left:0;    Content: "";    width:100%;    height:100%; Background:rgba (0,0,0,.3);}.    Pin-layout. control{Position:absolute;    bottom:0; Width: 80px;    height:30px;    line-height:30px;    border:1px solid #ADADAD;    border-radius:4px;    Text-align:center;    Text-decoration:none;    letter-spacing:2px;    Color:white; background:red;}. Pin-layout. Control:nth-of-type (1) {left: -100px;}. Pin-layout. Control:nth-of-type (3): Focus ~. pillar{animation-duration:.8s;}. Pin-layout. Control:nth-of-type (4): Focus ~. pillar{animation-duration:.2s;}.    Pin-layout. Control:nth-of-type (2) {right: -100px; Background:green;}.    Pin-layout. Control:nth-of-type (3) {bottom: -40px;    Left: -100px; Background: #037862;}.    Pin-layout. Control:nth-of-type (4) {bottom: -40px;    Right: -100px; Background: #036B3E;}. Pin-layout. Control:nth-of-type (1): Focus ~. pillar{animation-play-state:paused;}. Pin-layout. Control:nth-of-type (2): Focus ~. pillar{animation-play-state:running; pin-layout. Pillar Span[class^= "     Item "]{Position:absolute;    Top:calc ( -200px + 18px);    left:18px; border-width:0px 80px 200px 0px; Border-style:solid;    }. Pin-layout. Pillar span[class^= "Item"]:nth-of-type (1) {z-index:1;    Border-color:transparent transparent DodgerBlue transparent;    /*border-color:green Red Gray blue;*/}. Pin-layout. Pillar span[class^= "Item"]:nth-of-type (2) {z-index:2;    Border-color:transparent transparent orangered transparent;    Transform-origin:left Bottom; Transform:rotatez (90deg);}    . pin-layout. Pillar span[class^= "Item"]:nth-of-type (3) {z-index:3;    Border-color:transparent transparent Greenyellow transparent;    Transform-origin:left Bottom; Transform:rotatez (180deg);}    . pin-layout. Pillar span[class^= "Item"]:nth-of-type (4) {z-index:4;    Border-color:transparent transparent mediumpurple transparent;    Transform-origin:left Bottom; Transform:rotatez (270deg);}.    Wrapper. Pin-layout. Pillar. dot{Position:absolute;    top:0;    left:0;    border-width:19px;    Border-style:solid;    Border-color: #3C0505 transparent #3C0505 transparent; border-radius:50%;    Background: #F505EE;    z-index:1999; box-shadow:0 0 2px #1A0505;}    @keyframes Hovertreespin {0%{transform:rotate (0deg)} 100%{transform:rotate (360deg); }}


Windmill Using Picture blades:
Http://hovertree.com/h/bjaf/h9tb5itb.htm

Effects collection:

Http://www.cnblogs.com/roucheng/p/texiao.html