Supports CSS 3 rotation windmill and CSS 3 windmill

Supports CSS 3 rotation windmill and CSS 3 windmill

In the past, webpage animation was generally made using javascript, and more active animations are now implemented using pure CSS, And the animation control can also be implemented using CSS3, because CSS 3 is coming, CSS 3 has powerful animation functions. The following is a windmill rotation animation made of pure CSS3, and the speed is also controlled by CSS 3.

Experience:
Http://hovertree.com/texiao/css3/40/

:


We can see that the blade of the windmill is a triangle. For details about how to draw various images using css, refer:
Http://hovertree.com/h/bjaf/jtkqnsc1.htm
Http://hovertree.com/h/bjaf/ltgc20vn.htm

The animation attribute is used for css animation. For details, refer:
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 fan blades uses the transform attribute. For details, refer:
Http://hovertree.com/h/bjaf/c3bshswk.htm
Http://hovertree.com/h/bjaf/lxsexx3m.htm

In this example, the nth-of-type selector of CSS 3 is used. For details, refer:
Http://hovertree.com/h/bjaf/c2c0k0tf.htm

The code in this example is as follows:

<! 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);    }}
Windmills with fan blades:
Http://hovertree.com/h/bjaf/h9tb5itb.htm
Special effect set:
Http://www.cnblogs.com/roucheng/p/texiao.html