css 扫描二维码效果

发布于 2022-6-5 12:20
浏览
0收藏

linear-gradient

介绍

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);
}
<section class="container">
  <div class="gradient"></div>
  <div class="gradient"></div>
  <div class="gradient"></div>
  <div class="gradient"></div>
  <div class="gradient"></div>
</section>

图例
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%);
}

图例
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%;
}

图例
css 扫描二维码效果-开源基础软件社区

扫描

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

.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%);
  }
}

图例
css 扫描二维码效果-开源基础软件社区

分类
标签
已于2022-6-5 12:20:22修改
5
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐