使用css animation-timeline和animation-range实现页面滚动时动态文本高亮提示

Scroll Triggered Highlights w/ CSS Scroll Driven Animations

css, animation, highlight

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 425
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	font-weight: 80;
	padding: 0 4rem 0 1rem;
	background: hsl(0 0% 98%);
	color: hsl(0 0% 6%);
	font-family:  "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}

body::after {
	--size: 80px;
	--thickness: 2px;
	content: "";
	position: fixed;
	height: 100vh;
	width: 100vw;
	pointer-events: none;
	background:
		linear-gradient(transparent 0 calc(var(--size) - var(--thickness)), currentColor calc(var(--size) - var(--thickness)) var(--size)) 50% 50% / var(--size) var(--size),
		linear-gradient(90deg, transparent 0 calc(var(--size) - var(--thickness)), currentColor calc(var(--size) - var(--thickness)) var(--size)) 50% 50% / var(--size) var(--size);
	mask: linear-gradient(-35deg, transparent 50%, white);
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0.25;
}

.dark body {
	background: hsl(0 0% 6%);
	color: hsl(0 0% 96%);
}

mark {
	color: hsl(0 0% 6%);
}

.dark mark {
	color: hsl(0 0% 98%);
}

section {
	margin-bottom: 2rem;
}

.dark header svg path {
	fill: white;
}

* {
  box-sizing: border-box;
}

:where(h1, h2) {
	font-weight: 120;
}

code {
	max-width: 100%;
	overflow: auto;
}

header {
	height: 50vmin;
	min-height: 200px;
	width: 40ch;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.25rem;
  display: grid;
  align-content: center;
}

header svg {
	width: 35%;
	filter: drop-shadow(0 0 20px hsl(0 0% 50% / 0.75));
}

main {
	padding: 0 1rem;
  width: 40ch;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.25rem;
  padding: 0 0 50vmin 0;
}

button {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 48px;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 12px;
	border: 0;
	background: transparent;
	display: grid;
	place-items: center;
	cursor: pointer;
}

[aria-pressed=true] svg path:last-of-type,
[aria-pressed=false] svg path:first-of-type {
	display: none;
}

button svg {
	width: 65%;
}

mark {
	--lightness: 80%;
  --highlighted: 1;
  --highlight: hsl(var(--hue, 45) 80% var(--lightness));
  background: transparent;
}

@supports (animation-timeline: view()) {
  mark {
    --highlighted: 0;
    animation: highlight steps(1) both;
    animation-timeline: view();
    animation-range: entry 100% cover 10%;
  }
}

.dark mark {
	--lightness: 35%;
}

mark span {
  background: linear-gradient(120deg, var(--highlight, lightblue) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
  background-position: calc((1 - var(--highlighted)) * 110%) 0;
  transition: background-position 1s;
}
p, li {
  position: relative;
}

a {
	color: hsl(212 100% 50%);
	text-decoration: none;
}

a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 6px;
}

hr {
	margin: 2rem auto;
}

hr + p {
	text-align: center;
}

mark::after {
  content: attr(data-author);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  position: absolute;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--highlight);
  font-weight: 80;
  top: 0;
  left: 100%;
  translate: 50% 0;
  font-size: 0.875rem;
  scale: var(--highlighted);
  transition: scale 0.2s;
}

@keyframes highlight {
  to {
    --highlighted: 1;
  }
}

::view-transition-new(root) {
	animation: grow 1s;
}
::view-transition-old(root) {
	animation: none;
}

@keyframes grow {
	0% {
		clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
	}
	100% {
		clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
	}
}

HTML

<main>
  <section>
    <h1>Next.js on Vercel</h1>
    <span
      >Vercel is the native Next.js platform, designed to enhance the
      Next.js experience.</span
    >
    <p>
      Next.js is a fullstack React framework for the web, maintained by
      Vercel.
    </p>
    <p>
      While Next.js works when self-hosting, deploying to Vercel is
      zero-configuration and provides additional enhancements for
      <mark data-author="JT"
        ><span
          >scalability, availability, and performance globally.</span
        ></mark
      >
    </p>
  </section>
  <section>
    <h2 id="getting-started">Getting started</h2>
    <p>There are multiple ways to get started with Next.js on Vercel:</p>
    <ul>
      <li>
        If you already have a project with Next.js, install Vercel CLI and
        run the vercel command from your project&#39;s root directory
      </li>
      <li>
        Clone one of our Next.js example repos to your favorite git provider
        and deploy it on Vercel with the button below:
      </li>
      <li>Or, choose a template from Vercel&#39;s marketplace:</li>
    </ul>
    <p>
      <mark data-author="RH"
        ><span
          >Vercel deployments can integrate with your git provider to
          generate preview URLs for each pull request you make</span
        ></mark
      >
      to your Next.js project.
    </p>
  </section>
  <section>
    <h2 id="incremental-static-regeneration">
      Incremental Static Regeneration
    </h2>
    <p>
      Incremental Static Regeneration (ISR) allows you to
      <mark data-author="AB" style="--hue: 280"
        ><span
          >create or update content without redeploying your site</span
        ></mark
      >. ISR has three main benefits for developers: better performance,
      improved security, and faster build times.
    </p>
    <p>
      When self-hosting, (ISR) is limited to a single region workload.
      Statically generated pages are not distributed closer to visitors by
      default, without additional configuration or vendoring of a CDN. By
      default, self-hosted ISR does not persist generated pages to durable
      storage. Instead, these files are located in the Next.js cache (which
      expires).
    </p>
    <p>
      <mark data-author="GR" style="--hue: 30"
        ><span
          >To enable ISR with Next.js in the app router, add an options
          object with a revalidate property to your fetch requests</span
        ></mark
      >.
    </p>
    <p>To summarize, using ISR with Next.js on Vercel:</p>
    <ul>
      <li>Better performance with our global Edge Network</li>
      <li>
        Zero-downtime rollouts to previously statically generated pages
      </li>
      <li>
        Framework-aware infrastructure enables global content updates in
        300ms
      </li>
      <li>
        Generated pages are both cached and persisted to durable storage
      </li>
    </ul>
  </section>
  <section>
    <h2 id="server-side-rendering-ssr-">Server-Side Rendering (SSR)</h2>
    <p>
      Server-Side Rendering (SSR) allows you to render pages dynamically on
      the server. This is useful for pages where the rendered data needs to
      be unique on every request. For example, checking authentication or
      looking at the location of an incoming request.
    </p>
    <p>
      On Vercel,
      <mark data-author="LR" style="--hue: 220"
        ><span
          >you can server-render Next.js applications in either the Node.js
          runtime (default) with Serverless Functions or the Edge runtime
          with Edge Functions</span
        ></mark
      >. This allows you to pick the best rendering strategy on a per-page
      basis.
    </p>
    <p>To summarize, SSR with Next.js on Vercel:</p>
    <ul>
      <li>Scales to zero when not in use</li>
      <li>Scales automatically with traffic increases</li>
      <li>
        Has zero-configuration support for Cache-Control headers, including
        stale-while-revalidate
      </li>
      <li>
        Framework-aware infrastructure enables switching rendering between
        Edge/Node.js runtimes
      </li>
    </ul>
  </section>
  <section>
    <h2 id="image-optimization">Image Optimization</h2>
    <p>
      Image Optimization helps you achieve faster page loads by reducing the
      size of images and using modern image formats.
    </p>
    <p>
      When deploying to Vercel,
      <mark data-author="MN" style="--hue: 140"><span>images are automatically optimized on demand</span></mark
      >, keeping your build times fast while improving your page load
      performance and Core Web Vitals.
    </p>
    <p>
      When self-hosting, Image Optimization uses the default Next.js server
      for optimization. This server manages the rendering of pages and
      serving of static files.
    </p>
    <p>
      To use Image Optimization with Next.js on Vercel,
      <mark data-author="IR" style="--hue: 10"
        ><span
          >import the next/image component into the component you&#39;d like
          to add an image to</span
        ></mark
      >.
    </p>
    <p>To summarize, using Image Optimization with Next.js on Vercel:</p>
    <ul>
      <li>Zero-configuration Image Optimization when using next/image</li>
      <li>Helps your team ensure great performance by default</li>
      <li>
        <mark data-author="SH" style="--hue: 190"
          ><span
            >Keeps your builds fast by optimizing images on-demand</span
          ></mark
        >
      </li>
      <li>Requires No additional services needed to procure or set up</li>
    </ul>
  </section>
</main>

Scroll Triggered Highlights w/ CSS Scroll Driven Animations

css, animation, highlight

编辑器支持Emmet

快捷键

Scroll Triggered Highlights w/ CSS Scroll Driven Animations

css, animation, highlight

使用CSS mask-image和background-image实现带阴影的3D球体

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：