扫光特效

# 文字/图片扫光特效

# 图片扫光特效

解析：

使用伪类定义一个宽度极宽，高度25px的扫光块，然后使用transform旋转一下角度，最后使用动画改变扫光块的位置即可实现图片扫光的效果了。

具体代码：

.img{
    width:800px;
    height:333px;
    background: url(147.png) no-repeat center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.img::after {
    content: "";
    position: absolute;
    top: 0;
    width: 200vw;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
    animation: scan-light 4s ease-in infinite;
}

@keyframes scan-light {
    from {
        right: -100vw;
    }

    to {
        right: 40vw;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 文字扫光特效

具体代码：

.bg {
    background: #000;
    width: 1000px;
    height: 300px;
    margin: 0 auto;
    padding-top: 100px;
}

.bg .slideShine {
    width: 1000px;
    font-family: "Microsoft YaHei";
    font-size: 60px;
    text-align: center;
    background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
    -webkit-background-size: 80px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
    -webkit-animation: slideShine 3s infinite;
}

@-webkit-keyframes slideShine {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 100%;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

解析：

使用背景渐变-webkit-linear-gradient形成扫光背景块：

/*默认背景为黑色，从左往右产生黑白渐变效果，背景位于左上角，不重复，背景大小80x80 (扫光背景块)。*/
background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
-webkit-background-size: 80px;

1
2
3

使用-webkit-background-clip实现文本背景：

/*将扫光背景块控制在文字上，并填充文本颜色*/
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0.3);

1
2
3

最后通过动画调整背景的位置，达到扫过的效果。

在GitHub上编辑

#css

上次更新: 10/7/2021, 4:06:01 PM

← CSS3模糊的使用「布局技巧」图片未加载前自动撑开元素高度→