css 滚动触发动画 |css文本颜色 style

/* 方法一 */
/* 使用 animate.css 库实现滚动触发动画 */
/* 引入库 *//* 设置动画元素 */
偶是动画元素
/* 声明动画样式 */
.animated {
animation-duration: 1s; /* 动画持续时间 */
animation-fill-mode: both; /* 动画结束后，元素停留在最后一帧 */
}
/* 声明动画效果 */
.fadeIn {
animation-name: fadeIn; /* 动画效果，可选值：fadeIn, fadeOut, bounceIn, bounceOut, zoomIn, zoomOut 等 */
}

方法一使用了 animate.css 库实现动画效果。该库提供了多种预设的动画效果，同时支持自定义动画效果。方法一的缺点是需要加载外部库文件，同时需要在动画元素中设置动画类名。

/* 方法二 */
/* 使用 IntersectionObserver API 实现滚动触发动画 */
/* 设置动画元素 */
偶是动画元素
/* 创建观察器 */
let observer = new IntersectionObserver((entries, observer) =>{
entries.forEach(entry =>{
if (entry.isIntersecting) {
entry.target.classList.add('animate'); /* 当动画元素进入视窗时添加动画类名 */
observer.unobserve(entry.target); /* 取消观察 */
}
});
});
/* 监听动画元素 */
let boxes = document.querySelectorAll('.box');
boxes.forEach(box =>{
observer.observe(box); /* 添加观察器 */
});

方法二使用了 IntersectionObserver API 监听动画元素进入视窗。该 API 也可以用于实现无限滚动、懒加载等功能。方法二的优点是无需引入外部库文件，同时可以使用自定义的动画效果，但需要编写 JavaScript 代码实现。

总体来说，CSS 滚动触发动画可以增加网页的动感和交互性，提高用户体验。具体实现方式可以根据项目需求选择不同的方法。