鼠標經過圖片特效(CSS Hover Effects)是一種讓網站中的圖片在鼠標懸停時展示出視覺效果的CSS技術。它可以提高用戶對網站的興趣,增加頁面的活力和美感。現在,我們來介紹一些常見的鼠標經過圖片特效。
1. 放大效果(Scale Effect)
.img-scale{ transform: scale(1); transition: all 0.2s ease-out; } .img-scale:hover { transform: scale(1.2); }
此效果實現了圖片的放大和縮小,通過CSS中的transition屬性,將變化過程展示出來。
2. 翻轉效果(Flip Effect)
.img-flip{ position: relative; } .img-flip .flip-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: all .5s ease-out; transform: rotateY(0); } .img-flip:hover .flip-box{ transform: rotateY(180deg); } .img-flip .front, .img-flip .back{ position: absolute; display: block; width: 100%; height: 100%; } .img-flip .front{ backface-visibility: hidden; } .img-flip .back{ transform: rotateY(180deg); backface-visibility: hidden; }
此效果實現了圖片的翻轉,通過CSS中的transform屬性和backface-visibility屬性,將圖片在翻轉時展示出來。
3. 模糊效果(Blur Effect)
.img-blur{ filter: blur(0); transition: all .5s ease-out; } .img-blur:hover{ filter: blur(3px); }
此效果實現了圖片在鼠標懸停時的模糊效果,通過CSS中的filter屬性,將圖片模糊程度進行調整,以達到視覺效果。
4. 淡入淡出效果(Fade Effect)
.img-fade{ opacity: 1; transition: all .3s ease-out; } .img-fade:hover{ opacity: .7; }
此效果實現了圖片在鼠標懸停時的淡入淡出效果,通過CSS中的opacity屬性,設置圖片的透明度,以達到視覺效果。
以上,是鼠標經過圖片特效的四種常見實現方法。你可以根據自己的需求和創意,通過CSS技術實現各種各樣的圖片效果。