/* HTML部分 */
<div class="fade">
<p>这是一个淡入效果</p>
</div>
/* CSS部分 */
.fade {
opacity: 0; /* 初始透明度为0 */
transition: opacity 2s ease-in-out; /* 过渡效果为2秒 */
}
.fade:hover {
opacity: 1; /* 鼠标移动到该元素上时，透明度变为1，即不透明 */
}大家先通过HTML部分创建了一个具有fade类名的div标签，其中包含一个显示文字的p标签。接下来，在CSS部分，大家使用了opacity属性来控制元素的透明度。这里将被鼠标悬停的div元素的初始透明度设置为0，也就是不可见状态。通过设置transition属性，可以实现透明度的渐变过渡效果，让变化更加平缓自然。在.fade:hover伪类下，将透明度设置为1，即元素完成了淡入效果的动画。
当然，如果需要自定义动画的速度、时长和变化函数等属性，还可以使用@keyframes来自定义关键帧动画。不同的业务场景和需求，需要大家灵活选择使用合适的动画方式。