主机论坛 › Web技术 › 纯 CSS 实现的的3种扫光效果

Shaw0xyz 发表于 2024-7-9 13:41:51

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

本帖最后由 Shaw0xyz 于 2024-7-9 14:12 编辑

1. 引言

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

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

2.1 效果描述

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

2.2 实现步骤

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

2.3 代码示例

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

CSS:
.shining-effect-1 {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 24px;
    color: #fff;
    background-color: #333;
    overflow: hidden;
}

.shining-effect-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
}

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

3.1 效果描述

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

3.2 实现步骤

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

3.3 代码示例

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

CSS:
.shining-effect-2 {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 24px;
    color: #fff;
    background-color: #333;
    overflow: hidden;
}

.shining-effect-2::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

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

4.1 效果描述

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

4.2 实现步骤

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

4.3 代码示例

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

CSS:
.shining-effect-3 {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 24px;
    color: #333;
    background-color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.shining-effect-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    animation: text-shine 2s infinite;
}

@keyframes text-shine {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
}

5. 结论

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








/ 荔枝学姐de课后专栏 /

Hi！这里是荔枝学姐~

欢迎来到我的课后专栏

自然语言学渣 NLP摆烂姐

热衷于技术写作 IT边角料

AIGC & Coding & Linux ...

~互撩~ TG: @Shaw_0xyz

查看完整版本: 纯 CSS 实现的的3种扫光效果