css渐入渐出的效果 |jq获取css名称

.fade-in {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.fade-in.active {
opacity: 1;
}
.fade-out {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.fade-out.active {
opacity: 0;
}

以上这段CSS代码是实现渐入渐出效果的基本代码。其中，通过设置opacity属性，控制页面元素的透明度，opacity值为0时，元素不可见，值为1时，元素完全可见。通过transition属性，设置元素透明度变化的过渡效果，这里的过渡时间为1秒，过渡形式为ease-in-out。通过.active类，设置元素实现渐入渐出效果的状态切换。

下面是一个实例演示，在页面加载时，通过JavaScript代码控制元素渐入效果：

const box = document.getElementById('box');
setTimeout(() =>{
box.classList.add('active');
}, 1000);

以上这段JavaScript代码是在元素加载后1秒钟，通过add方法添加.active类，从而触发元素渐入效果的过渡切换。

通过CSS渐入渐出效果，可以轻松实现页面元素的优美展示效果，为用户带来更好的用户体验与视觉享受。在实际应用过程中，还需注意合理设置过渡时间与过渡形式，避免影响用户阅读体验，增加页面加载时间。