最近网上冲浪，偶然发现了下面的样式：
原文：Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes | Alex MacArthur
果断 F12：
.gradient-text:where(.astro-XAIGTII7) {
background: linear-gradient(to bottom right,#374151 50%,#6b7280 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rotateGradient 1s cubic-bezier(.42,0,.58,1) forwards;
background-size: 100% 150%;
}
ChatGPT 的解释如下：
这段 CSS 代码定义了一个名为 .gradient-text 的类，该类应用于带有 .astro-XAIGTII7 类的元素（:where(.astro-XAIGTII7) 是一个 CSS 伪类，它选择具有 .astro-XAIGTII7 类的元素）。这段代码的主要功能是给文本应用一个渐变效果，并添加一个动画。下面是每行代码的详细解释：
background: linear-gradient(to bottom right,#374151 50%,#6b7280 50%);：这行代码定义了一个线性渐变背景。渐变从左上角开始，向右下角结束。颜色从#374151渐变到#6b7280，在 50% 的位置开始变化。-webkit-background-clip: text;：这是一个特定于 WebKit 浏览器（如 Safari 和 Chrome）的属性，它将背景剪切到文本。这意味着背景渐变将只应用于文本，而不是整个元素。-webkit-text-fill-color: transparent;：这是另一个特定于 WebKit 的属性，它将文本颜色设置为透明。这使得背景渐变可以透过文本显示出来。animation: rotateGradient 1s cubic-bezier(.42,0,.58,1) forwards;：这行代码添加了一个名为rotateGradient的动画，该动画的持续时间为 1 秒，使用了一个贝塞尔曲线函数（cubic-bezier(.42,0,.58,1)）来控制动画的速度曲线。forwards关键字表示动画结束后，元素将保留动画的最后一个关键帧的样式。background-size: 100% 150%;：这行代码设置了背景图像的大小。宽度为元素宽度的 100%，高度为元素高度的 150%。
新技能 GET！
