从超级无敌水帖计划（随缘更新）继续讨论：
在 扫光效果浅析之卡片 一文里，介绍了卡片（容器）扫光效果的实现，今天我再说说 文本 扫光效果的实现，与容器实现方法有所不同。
效果
提示
在 容器扫光 效果中，我们是直接改变背景的偏移来实现的，在这里我们则还需要将原本的文本颜色设置为透明，使用剪裁将文本内容漏出来
实现
<h1 class='text'>SI WU XIE</h1>
h1 {
color: #ed207b;
-webkit-text-fill-color: transparent;
background: linear-gradient(
45deg,
transparent 40%,
rgba(#fff, 0.6),
transparent 60%
)
no-repeat,
currentColor;
-webkit-background-clip: text;
}
-webkit-text-fill-color: transparent 将原文本颜色设置为透明；
-webkit-background-clip: text 将文本位置显现出来；
还记得 currentColor 吗？就是使用我们定义的当前 color，可以在 这里 复习一下。
当前并未添加动画，先预览下效果
需要实现动画，还是和之前一样，我们直接调整它的背景定位
animation: saoguang 2s infinite;
@keyframes saoguang {
0% {
background-position: -100%;
}
100% {
background-position: 200%;
}
}
此时，我们发现呈现的效果依然是静态的，跟上方图示一样！
究其原因，是因为背景默认大小和容器一致造成的,即给定背景位置的百分比偏移量是相对于容器的，这么说可能有点拗口，具体可以参阅 MDN 了解。
知道了是因为背景大小导致的，那我们就手动改变背景大小即可
background-size: 50%;
此时，效果就已经完成啦！是不是简简单单~ CODEPEN预览
完整CSS
h1 {
color: #ed207b;
font-weight: bold;
-webkit-text-fill-color: transparent;
background: linear-gradient(
45deg,
transparent 35%,
rgba(#fff, 0.6),
transparent 65%
)
no-repeat,
currentColor;
background-size: 50%;
-webkit-background-clip: text;
animation: saoguang 2s infinite;
}
@keyframes saoguang {
0% {
background-position: -100%;
}
100% {
background-position: 200%;
}
}
姊妹篇：
