CSS圖片進入動畫效果是一種常見的網頁設計技術,可以為頁面增加視覺沖擊力和良好的用戶體驗。下面我們來介紹一些實現這種效果的CSS代碼。
/*圖片縮放動畫*/ img{ transition: all 0.3s ease-in-out; } img:hover{ transform: scale(1.2); } /*圖片漸變動畫*/ img{ opacity: 0.5; transition: all 0.3s ease-in-out; } img:hover{ opacity: 1; } /*圖片滑動動畫*/ img{ position: relative; left: 0; transition: all 0.3s ease-in-out; } img:hover{ left: 20px; } /*圖片旋轉動畫*/ img{ transition: all 0.3s ease-in-out; } img:hover{ transform: rotate(45deg); }
以上是常用的四種圖片進入動畫效果,分別為縮放、漸變、滑動和旋轉。通過設置不同的CSS屬性和值,并配合hover偽類,就可以實現不同的動畫效果。