css 扫描二维码效果

xjj_xnkl

发布于 2022-6-5 12:20

浏览

0收藏

介绍

linear-gradient : linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 <gradient> 数据类型，是一种特别的 <image> 数据类型。
linear-gradient() 创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。即默认 to bottom === 180deg

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.gradient {
  height: 20vw;
  width: 20vw;
}
.gradient:nth-child(1) {
  background-image: linear-gradient(#30cfd0, #330867);
}
.gradient:nth-child(2) {
  background-image: linear-gradient(to bottom, #30cfd0, #330867);
}
.gradient:nth-child(3) {
  background-image: linear-gradient(180deg, #30cfd0, #330867);
}
.gradient:nth-child(4) {
  background-image: linear-gradient(0, #30cfd0, #330867);
}
.gradient:nth-child(5) {
  background-image: linear-gradient(to top, #30cfd0, #330867);
}
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.

<section class="container">
  <div class="gradient"></div>
  <div class="gradient"></div>
  <div class="gradient"></div>
  <div class="gradient"></div>
  <div class="gradient"></div>
</section>
1.
2.
3.
4.
5.
6.
7.

图例
css 扫描二维码效果-鸿蒙开发者社区

有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。
当我们在颜色栏后面跟个数值就能让渐变色从改值开始渐变，默认是 0 -> 100%, 下一个颜色不写数值时，渐变色会从第一个数值 -> 下下个数值（为空就是 100%）

.gradient:nth-child(1) {
  background-image: linear-gradient(#30cfd0, #330867);
}
.gradient:nth-child(2) {
  background-image: linear-gradient(#30cfd0 0, #330867 100%);
}
.gradient:nth-child(3) {
  background-image: linear-gradient(#30cfd0 50%, #330867);
}
.gradient:nth-child(4) {
  background-image: linear-gradient(#30cfd0 50%, #330867 100%);
}
.gradient:nth-child(5) {
  background-image: linear-gradient(#30cfd0 50%, #330867 50%);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

图例
css 扫描二维码效果-鸿蒙开发者社区

绘制九宫格

利用 background-image 可以添加多幅背景图片的效果，我们可以添加多个一种颜色渐变到透明的渐变色，再利用 background-size 制约大小即可做出九宫格（当背景图片小于容器时, background-repeat 默认图像重复）

.gradient {
  height: 201px;
  width: 201px;
  background-image: linear-gradient(#30cfd0 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, #30cfd0 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 100% 20px, 20px 100%;
}
1.
2.
3.
4.
5.
6.

图例
css 扫描二维码效果-鸿蒙开发者社区

扫描

利用 clip-path 实现动态区域裁剪, clip-path 的作用和名字一样，按照路径裁切。只要我们脑洞够大，把元素裁切成相应的形状，就能做出许多意令人意想不到的奇妙效果。 clip-path 可以按照 svg 路径、盒子模型、基本多边形路径等几种不同的方式来裁切
clip-path: polygon() 的基本用法：括号内用逗号隔开了四组数据，这些数据对应的是坐标，即（x,y）；每一组坐标都是以原正方形左上角的点为原点，按照顺序依次连接起来(左上, 右上, 右下, 左下)。
最后结合 css 的 animation 属性完成图片扫描效果

.gradient{
  height: 201px;
  width: 201px;
  background-image: url("./qrcode.png");
  background-size: 100% 100%;
  position: relative;
}
.gradient::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(#74b9ff, #2196f3), linear-gradient(#30cfd0 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, #30cfd0 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgba(0, 0, 0, 0), #74b9ff);
  background-size: 100% 2%, 100% 20px, 20px 100%, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: scan 2.6s linear infinite;
  }
@keyframes scan {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 2%, 0% 2%);
  }
  100% {
    background-position: 0 100%, 0 0, 0 0, 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 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.
30.