如何用css3實現一個圖片的抖動或者彈跳


<li onmouseout="this.className='off'"><a href=""><img src="../活力廣州_files/admin.png" alt=""></a></li>

.off{
-webkit-animation:1s seconddiv;
background: transparent;
}

@keyframes seconddiv{
0% {transform: scale(1.4,1.4);}
10% {transform: scale(1,1);}
25% {transform: scale(1.2,1.2);}
50% {transform: scale(1,1);}
70% {transform: scale(1.2,1.2);}
100% {transform: scale(1,1);}
}

先設置onmouseout(鼠標移出)的函數

onmouseout="this.className='off'"

設置off的函數,函數為css3動畫的彈跳,或者抖動

再設置keyframes的函數動畫

這樣就可以不用js做出一個抖動的效果啦


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM