CSS圖片晃動動畫可以使網站更加活潑和有趣,下面將介紹如何實現它:
/* 使用CSS3實現圖片晃動動畫 */ img:hover{ animation: shake 0.5s; animation-iteration-count: infinite; } @keyframes shake{ 0%{transform: rotate(0deg);} 25%{transform: rotate(10deg);} 50%{transform: rotate(-10deg);} 75%{transform: rotate(10deg);} 100%{transform: rotate(-10deg);} }
通過設置圖片的hover狀態,再使用CSS3的keyframes屬性實現動畫。通過控制transform屬性的rotate值來控制圖片的晃動程度。