做这个案例之前首先要大概了解CSS的transform的属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
看看效果图
打开的时候自动旋转，当鼠标经过的时候加快旋转速度，鼠标移开就恢复原来的速度。
参考代码：（为了美观可以自已加上一直背景图，我这里是空白的背景显得单调）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画</title> <link rel="stylesheet" type="text/css" href="css/animate1.css"/> </head> <body> <div></div> <div id="one"> <div class="sj"> </div> <div class="ye"> </div> <div class="ye1"> </div> <div class="re"> </div> <div class="blue"> </div> <div class="blue1"> </div> <div class="green"> </div> <div class="green1"> </div> </div> <div id="mg"> </div> <div> <!--<img src="img/1.jpg" id="img"/>--> </div> </body> </html>
css:(还有更加简单的方法画出这个风车的，我这里复杂了一点，比较笨重，不够简洁)
*{ margin: 0; padding: 0; } #s{ float: left; } #one:hover{ animation:run 0.6s linear infinite; } @keyframes run{ from{ transform: rotate(360deg); } to{ transform: rotate(0deg); } } .sj{ margin-top: 5px; transform: rotate(-46deg); position: absolute; top:14px; left: -49px; float: left; width: 0; height: 0; z-index: 2; border: 50px solid lightcoral; border-color:lightcoral transparent transparent transparent ; } .ye{ transform: rotate(0deg); position: absolute; left: 0px; top:5px float: left; width: 0; height: 0; border: 80px solid #D9B300; z-index: 2; border-color: transparent transparent transparent #D9B300; } .ye1{ transform: rotate(0deg); position: absolute; left: -80px; top:78px; float: left; width: 0; height: 0; z-index: 2; border: 80px solid orange; border-color: transparent orange transparent transparent ; } .re{ transform: rotate(-46deg); position: absolute; left: 21px; top: -61px; float: left; z-index: 2; width: 0; height: 0; border: 59px solid brown; border-color: transparent transparent transparent brown; } .blue{ transform: rotate(0deg); position: absolute; left: 80px; top:-79px; float: left; width: 0; height: 0; z-index: 2; border: 80px solid cornflowerblue; border-color: transparent transparent transparent cornflowerblue; } .blue1{ transform: rotate(-44deg); position: absolute; left: 102px; top: 23px; float: left; width: 0; height: 0; z-index: 2; border: 58px solid lightblue; border-color: lightblue transparent transparent transparent ; animation:gg 1s linear infinite; } .green{ transform: rotate(0deg); position: absolute; left: 80px; top: 80px; z-index: 2; float: left; width: 0; height: 0; border: 81px solid #01814A; border-color: #01814A transparent transparent transparent ; z-index: 2; } .green1{ transform: rotate(-45deg); position: absolute; top:103px; left: 23px; float: left; width: 0; height: 0; border: 57px solid seagreen; border-color: transparent seagreen transparent transparent ; z-index: 2; } #mg{ background: salmon; width: 15px; height: 300px; border-radius: 8px; position: absolute; top:220px; left:680px; z-index: 0; } #one{ margin: 150px auto auto auto; width: 162px; transform: rotate(-45deg); height: 162px; line-height: 168px; text-align: center; position: relative; z-index: 3; animation:run 9s linear infinite; } #img{ position: relative; top:-50px; left: 522px; z-index: -1; }
View Code