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

Shaw0xyz

1. 引言

在现代网页设计中，CSS 的强大功能使得我们能够实现各种炫酷的视觉效果。本文将介绍三种使用纯 CSS 实现的扫光效果，这些效果可以为网页增添动感与活力，而无需借助任何 javaScript。

2. 扫光效果一：线性渐变动画

2.1 效果描述

该效果通过使用线性渐变和 CSS 动画来实现。扫光效果从左至右，覆盖整个元素表面，形成动态的光线扫描效果。

2.2 实现步骤

(1) 定义一个包含线性渐变的背景。
(2) 使用 CSS 动画控制线性渐变的移动。

2.3 代码示例

HTML:

1. <div class="shining-effect-1">扫光效果一</div>

复制代码

CSS:

1. .shining-effect-1 {
   
2.     position: relative;
   
3.     display: inline-block;
   
4.     padding: 10px 20px;
   
5.     font-size: 24px;
   
6.     color: #fff;
   
7.     background-color: #333;
   
8.     overflow: hidden;
   
9. }
   
10. 
    
11. .shining-effect-1::before {
    
12.     content: '';
    
13.     position: absolute;
    
14.     top: 0;
    
15.     left: -100%;
    
16.     width: 100%;
    
17.     height: 100%;
    
18.     background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    
19.     animation: shine 2s infinite;
    
20. }
    
21. 
    
22. @keyframes shine {
    
23.     0% {
    
24.         left: -100%;
    
25.     }
    
26.     100% {
    
27.         left: 100%;
    
28.     }
    
29. }

复制代码

3. 扫光效果二：旋转渐变动画

3.1 效果描述

该效果使用径向渐变和旋转动画实现，光线效果从元素中心开始旋转，形成动态的环绕扫光效果。

3.2 实现步骤

(1) 定义一个包含径向渐变的背景。
(2) 使用 CSS 动画控制径向渐变的旋转。

3.3 代码示例

HTML:

1. <div class="shining-effect-2">扫光效果二</div>

复制代码

CSS:

1. .shining-effect-2 {
   
2.     position: relative;
   
3.     display: inline-block;
   
4.     padding: 10px 20px;
   
5.     font-size: 24px;
   
6.     color: #fff;
   
7.     background-color: #333;
   
8.     overflow: hidden;
   
9. }
   
10. 
    
11. .shining-effect-2::before {
    
12.     content: '';
    
13.     position: absolute;
    
14.     top: -50%;
    
15.     left: -50%;
    
16.     width: 200%;
    
17.     height: 200%;
    
18.     background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    
19.     animation: rotate 3s linear infinite;
    
20. }
    
21. 
    
22. @keyframes rotate {
    
23.     0% {
    
24.         transform: rotate(0deg);
    
25.     }
    
26.     100% {
    
27.         transform: rotate(360deg);
    
28.     }
    
29. }
    

复制代码

4. 扫光效果三：文本扫光

4.1 效果描述

该效果使用背景剪裁和线性渐变实现，光线效果在文本内容上移动，形成文字扫光效果。

4.2 实现步骤

(1) 使用背景剪裁和线性渐变设置文本背景。
(2) 使用 CSS 动画控制线性渐变的移动。

4.3 代码示例

HTML:

1. <div class="shining-effect-3">扫光效果三</div>
   

复制代码

CSS:

1. .shining-effect-3 {
   
2.     position: relative;
   
3.     display: inline-block;
   
4.     padding: 10px 20px;
   
5.     font-size: 24px;
   
6.     color: #333;
   
7.     background-color: #fff;
   
8.     background-clip: text;
   
9.     -webkit-background-clip: text;
   
10.     color: transparent;
    
11. }
    
12. 
    
13. .shining-effect-3::before {
    
14.     content: '';
    
15.     position: absolute;
    
16.     top: 0;
    
17.     left: -100%;
    
18.     width: 100%;
    
19.     height: 100%;
    
20.     background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    
21.     animation: text-shine 2s infinite;
    
22. }
    
23. 
    
24. @keyframes text-shine {
    
25.     0% {
    
26.         left: -100%;
    
27.     }
    
28.     100% {
    
29.         left: 100%;
    
30.     }
    
31. }

复制代码

5. 结论

本文介绍了三种使用纯 CSS 实现的扫光效果，包括线性渐变动画、旋转渐变动画和文本扫光效果。通过合理使用 CSS 渐变和动画属性，可以实现各种炫酷的视觉效果，为网页设计增添色彩和动感。希望这些示例能为您的网页设计提供灵感和参考。








/ 荔枝学姐de课后专栏 /

Hi！这里是荔枝学姐~

欢迎来到我的课后专栏

自然语言学渣 NLP摆烂姐

热衷于技术写作 IT边角料

AIGC & Coding & linux ...

~互撩~ TG: @Shaw_0xyz