文本突出滚动显示

十一月 14, 2023 / Mr.x / 3阅读 / 0评论/ 分类: 实用创意
文本突出滚动显示 — 荣小站
前端 CSS 动画 滚动驱动

文本突出滚动显示

使用 CSS Scroll-driven Animations 让文本标记在滚动时高亮显示。

▼ 向下滚动查看效果

欢迎来到荣小站

这是一个关于前端技术的博客，分享各种有趣的CSS特效和JavaScript应用。

谢谢你的到来，一同享受学习的乐趣，获取丰富的知识，共同度过充实而有趣的时光！

核心技术

本文介绍的是 CSS Scroll-driven Animations（滚动驱动动画），这是CSS动画规范的最新特性之一。

通过 animation-timeline 属性，我们可以让动画与滚动位置关联，实现各种有趣的交互效果。

当你滚动这段文本时，上面的高亮标记会从右侧逐渐显示出来，营造出一种文字逐字显现的感觉。

应用场景

这种效果非常适合：

  • 文章中的重点句子突出
  • 阅读进度指示
  • 交互式内容展示
  • 创意文案展示

滚动继续向下，观察标记的变化，你会发现背景从透明逐渐变为黄色，营造出一种时光流转的感觉。

这种技术不需要任何JavaScript，纯CSS即可实现，极大地提升了网页性能和开发体验。

继续滚动，享受这种丝滑的动画效果，让阅读变得更加有趣和生动。

浏览器支持

目前主流浏览器中，Chrome 115+、Edge 115+ 已支持此特性。

对于不支持的浏览器，会优雅降级，标记始终显示为高亮状态。

— 已到达底部 —

谢谢你的到来，一同享受学习的乐趣，获取丰富的知识，共同度过充实而有趣的时光！

这是一个基于 CSS Scroll-driven Animations（滚动驱动动画）实现的文本高亮效果。当用户滚动页面时，标记（mark）元素的背景会从透明逐渐变为高亮颜色，营造出一种文字渐次显现的视觉体验。

核心原理

这个效果依赖于 CSS 的两个关键特性：

  • animation-timeline: view()：将动画绑定到元素的可见区域，当元素进入视口时触发动画
  • background-size: 200% 100%：创建双倍宽度的背景，通过移动背景位置实现渐显效果

完整代码

以下是完整的单文件代码，你可以直接保存为 .html 文件运行：

HTML

<article>
  <div class="content">
    <p>谢谢你的到来，<mark>一同享受学习的乐趣，获取丰富的知识，共同度过充实而有趣的时光！</mark></p>
  </div>
</article>

CSS

@keyframes highlight {
  to {
    background-position: 0;
  }
}

mark {
  animation: highlight linear forwards;
  animation-timeline: view(60% 20%);
  background: linear-gradient(
    to right,
    oklch(0.86 0.19 84.89 / 1) 50%,
    oklch(0.86 0.19 84.89 / 0) 50%
  );
  background-position: 100%;
  background-size: 200% 100%;
  border-radius: 0.125rem;
  padding-inline: 0.125rem;
}

参数详解

参数说明可选值
animation-timeline动画时间线view(), scroll()
view() 第一个参数视图区间起始位置0% - 100%
view() 第二个参数视图区间长度0% - 100%
background-size背景尺寸200% 100% 表示双倍宽度
background-position背景起始位置100% 从右侧开始

使用说明

  1. 将完整代码保存为 .html 文件
  2. 用浏览器打开（推荐 Chrome 115+ 或 Edge 115+）
  3. 向下滚动页面，观察标记的高亮效果
  4. 可以调整 animation-timeline 的参数自定义动画触发时机

#文本突出滚动显示(1)

评论