css3旋轉動畫

html

<div class="rotate_bg">
    <img class="rotateImages" src="images/01.png" />
</div>

css

.rotate_bg{ 
    width: 500px; 
    height: 500px; 
    background: #59d1b6; 
    margin: 200px auto; 
}
.rotate_bg img.rotateImages{
    -webkit-animation:myRotate 10s linear infinite;
    animation:myRotate 10s linear infinite;
}
@-webkit-keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}
@keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}

效果圖

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章