css文字淡入淡出 |css3 透明玻璃样式

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

代码使用了两个类名，其中fade-in类设置了文本的初始透明度为0，然后通过transition属性来创建了一个在0.5秒内淡入淡出的过渡动画效果。而fade-in.active则设置了文本显示时的透明度为1，这个类名需要在JavaScript中动态添加和移除。

接下来就是如何在JavaScript中动态添加和移除类名了，使用jQuery的语法：

$(window).on('scroll', function() {
$('.fade-in').each(function() {
if($(this).offset().top< $(window).scrollTop() + $(window).height()) {
$(this).addClass('active');
}
else {
$(this).removeClass('active');
}
});
});

代码中的scroll事件监听器将在浏览器滚动时触发，然后通过each方法遍历所有拥有fade-in类名的元素，如果元素的顶部位置小于浏览器的滚动距离加上浏览器的高度，就给它添加active类名，从而实现了文本的淡入效果。

CSS文字淡入淡出效果是一种简单而实用的展示效果，它可以使网页内容更加吸引人，并提升用户的体验感。大家可以通过以上方法实现这个效果，并且可以根据自己的需要进行调整和优化。