[分享]css3文字淡入淡出代码

CSS3文字淡入淡出效果：实现文字渐隐渐现的动画效果，让页面更有趣味性。 要实现CSS3文字淡入淡出的效果，需要使用两个关键的CSS属性：opacity和transition。 如下是一个简单的CSS...

CSS3文字淡入淡出效果：实现文字渐隐渐现的动画效果，让页面更有趣味性。
要实现CSS3文字淡入淡出的效果，需要使用两个关键的CSS属性：opacity和transition。
如下是一个简单的CSS3文字淡入淡出的样例代码：

 p {
        opacity: 0;
        transition: opacity 2s;
    }
<br>
    p:hover {
        opacity: 1;
    } 

上面的代码可以看出，我们给p标签设置了opacity属性，并将它设置为0，这意味着该元素完全透明，看不见。
接下来，我们使用了transition属性来指定transition效果的持续时间，这里我们设置了2秒。这样，当我们将鼠标悬停在p标签上时，浏览器会自动将元素的opacity属性从0渐变到1，实现淡入效果。
如果你想让淡出效果同样自然流畅，可以把:hover改为:not(:hover)，这样鼠标离开的时候，元素的opacity会慢慢地渐变为0，实现淡出效果，就像这样：

 p {
        opacity: 0;
        transition: opacity 2s;
    }
<br>
    p:not(:hover) {
        opacity: 1;
    } 

这样，CSS3文字淡入淡出效果就完成了！您可以自由地在您的网站上应用这个效果，让页面更加生动有趣，增加用户体验。