纯 CSS 实现的的3种扫光效果

1. 文本扫光效果

1.1 利用CSS渐变和背景裁剪

文本扫光效果的实现依赖于CSS3的渐变功能和背景裁剪技术。通过设置一个线性渐变，可以创建一个从透明到不透明再到透明的扫光效果。使用background-clip: text属性，可以将渐变效果应用到文本上，从而使文本看起来像是被光线扫过。

• 渐变设置：linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%)
• 背景裁剪：-webkit-background-clip: text; -webkit-text-fill-color: transparent;

这种技术可以应用于标题、按钮文本或任何需要强调的文本元素。

1.2 通过改变background-position实现动画

为了使扫光效果动起来，可以通过CSS动画改变渐变背景的位置。这可以通过@keyframes规则来实现，其中定义了背景位置从一侧移动到另一侧的动画。

• 动画定义：@keyframes shark-txt { from { background-position: -100%; } to { background-position: 200%; } }
• 动画应用：animation: shark-txt 2s infinite;

通过调整background-position的百分比值，可以控制扫光的起始和结束位置&#