java编写旋转风车_纯CSS实现炫酷旋转小风车

旋转小风车

.container{position:absolute;top:12%;left:0;right:0;bottom:0;margin:auto;

}.box_block{position:relative;width:300px;height:300px;margin:0 auto;animation:Positive_rotation 4s linear infinite;

}.box_block:hover{animation:contrarotation .8s linear infinite;/*linear 动画从头到尾的速度是相同的*/

/*infinite 动画无限次播放*/

}

/*反向旋转*/@keyframes contrarotation{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}/*正向旋转*/@keyframes Positive_rotation{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.div1{width:0;height:0;border:75px solid #ffb02d;border-left-color:transparent;/*隐藏*/border-bottom-color:#3aa37a;float:left;

}.div2{width:0;height:0;border:75px solid #ffcd35;border-top-color:transparent;border-right-color:#ee7a65;float:left;

}.div3{width:0;height:0;border:75px solid #a0bd77;border-bottom-color:transparent;border-right-color:#5687e7;float:left;

}.div4{width:0;height:0;border:75px solid #5697fe;border-right-color:transparent;border-top-color:#ee7a65;float:left;

}.stick{width:14px;height:400px;background:#666666;z-index:-1;left:0;top:86px;bottom:0;right:0;margin:auto;position:absolute;

}