<!DOCTYPE html><html><head><meta charset="UTF-8"><title>旋转小风车</title><style type="text/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;}</style></head><body><div class="container"><div class="box_block"><div class="div1"></div><div class="div2"></div> <div class="div3"></div><div class="div4"></div><div class="remove_blocks" style="clear: both;"></div></div><div class="stick"></div> </div></body></html>
效果图：
