CSS圖片漸隱漸顯是一種常用的效果,通過CSS代碼可以使圖片在頁面上徐徐漸變出現或消失,讓用戶感受到更加流暢的視覺效果。下面介紹兩種實現方法:
//方法一:使用animation動畫漸變 .fade-in{ animation: fadeIn ease 3s; } .fade-out{ animation: fadeOut ease 3s; } @keyframes fadeIn{ 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes fadeOut{ 0%{ opacity:1; } 100%{ opacity:0; } }
通過設置animation動畫,控制圖片的opacity屬性實現漸入和漸出效果。但是這種方式需要瀏覽器支持,并且對于一些比較老舊的瀏覽器可能不生效。
//方法二:使用transition過渡效果漸變 .img-box{ opacity:1; transition: opacity 1s ease; } .img-box:hover{ opacity:0.5; }
通過設置元素的opacity屬性,在hover狀態下改變opacity值,實現漸變效果,這種方式叫做transition。這種方式可以兼容大部分瀏覽器,但是可能會存在一些性能問題,需要根據實際情況進行選擇。
總之,無論哪種方式,在實際開發中都可以應用,需要根據實際情況進行選擇,實現最佳的效果。
上一篇css圖片花瓣盒子
下一篇oracle 00942