做這個案例之前首先要大概了解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; }