CSS3中的Fade In是指元素的漸變顯示效果,可以讓元素從透明度為0到逐漸變為不透明。
.fade-in{ opacity: 0; transition: opacity 2s ease-in-out; } .fade-in:hover{ opacity: 1; }
上面的代碼演示了一個fade-in的效果,當鼠標懸浮在元素上時,元素從透明度0到逐漸變為不透明。
我們可以對這個效果進行修改,來實現不同的效果。
.fade-in{ opacity: 0; animation-name: fade-in; animation-duration: 2s; } @keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
使用animation屬性讓元素從透明度0到逐漸變為不透明。
總之,通過CSS3 fade in效果,我們可以為網頁添加更多的交互效果,提升用戶體驗。