用CSS做一個物件連續旋轉的動畫方法-教學撰寫:徐嘉裕Neil hsu

 如果要做一個像下圖這樣的風車順時鐘一直重複選轉

可以用以下的CSS方法達成：

HTML結構

<div id="bottompagerimg">

<div id='windmillbox01'></div> //旋轉風車圖片

<div id='windmillbox02'></div>  //底下支架

</div>

 

CSS結構

#bottompagerimg {  //物件父層BOX設定
position: absolute;
width: 282px;
height: 306px;
right: 89px;
top: -289px;
z-index: 20;
}


#windmillbox01{  //風車設定
position: absolute;
top: 0px;
width: 276px;
height: 276px;
background: url(../../img/blocks/shiangan_46.png) no-repeat left top;
animation-duration: 3.5s; /*執行時間*/
animation-fill-mode: forwards;   
animation-name: windmillbox;
animation-timing-function: linear;  /*相同的速度*/
animation-iteration-count: infinite;  /*動畫重複執行*/
z-index: 5;
}


@keyframes windmillbox {  //風車動畫

0% {
transform:rotate(0deg);
}
50% {
transform:rotate(180deg);
}

100% {
transform:rotate(360deg);
}
}


#windmillbox02{   //風車支架設定
position: absolute; 
width: 20px;
height: 120px;
bottom: 0px;
left: 125px;
background: url(../../img/blocks/shiangan_47.png) no-repeat left top;
z-index: 0;
}

物件會以 3.5S 旋轉一圈，然後一直重複旋轉，這樣就可以了~有需要的朋友參考看看!!

工作心得撰寫：徐嘉裕 Neil hsu