【龙珠专场】用纯css画个龙珠雷达

我正在参加码上掘金体验活动，详情：show出你的创意代码块

前言

小时候看过龙珠的伙伴们可能都希望这世界上真的有龙珠这种秘宝让我们搜寻，集齐后向神龙许愿来实现自己的愿望，或许直到我们长大还有这种憧憬，所以本期将会通过使用纯css来完成一个龙珠雷达的效果。并根据它的制作，来讲述一些css绘制图像动画的小技巧。

代码

code.juejin.cn/pen/7085312…

正文

1. 网格绘制

雷达的网格如果一个个用HTML标签写出来十分的分时费力而且不美观，所以我们将用 repeating-linear-gradient 来创建由重复线性渐变来实现1像素的线段，当然线段由横竖两种，可以在第一个参数上传入角度即可。

语法形式：repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

当然光有线段还不足以变成网格，我们还要加入一些背景色来体现出这些网格比如用过 radial-gradient 来实现一个圆形渐变，目的是为了实现近中间位置的一个高亮效果。最后，再给一个 linear-gradient 的绿色渐变来完成覆盖。

.randar-content {
    // ...
    background: 
        radial-gradient( #afadad 50%, #0a0a0a),
        repeating-linear-gradient(
          0deg,
          var(--line-color) 0px,
          var(--line-color) 1px,
          transparent 1px,
          transparent 25px
        ),
        repeating-linear-gradient(
          90deg,
          var(--line-color) 0px,
          var(--line-color) 1px,
          transparent 1px,
          transparent 25px
        ),
        linear-gradient(135deg, var(--green), var(--green));
    background-position-x: 20px;
    background-position-y: 7px;
}
复制代码

微信截图_20220411215556.png

此时，我们发现这样还不行，网格没出新，而且绿色背景也没有，只有灰色高亮的产生，别急，还没有结束，我们要设置一下 background-blend-mode ，也就是背景混合模式变为soft-light ，这样绿色背景和网格都会出现了。而这里我们还加了 will-change ，它为web开发者提供了告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

.randar-content {
    // ...
    background-blend-mode: soft-light;
    will-change: transform;
}
复制代码

微信截图_20220411210038.png

2. 开关触发

首先开关由两部分构成，分别是可伸缩的头部，和底座。如下：

微信截图_20220411210905.png

这里的具体实现可以看演示的代码，都是基础的css绘制不做过多描述了。主要要讲解的是，在不使用任何js的情况下，如何用纯css来实现，开关的打开与关闭的。

这里要借助的就是 <input type="checkbox" /> 标签，当标记有checked的时候，我们可以通过css的伪类来给出相应的操作。

在checked激活后，可以通过+或者~的选择符来找寻其他要改变的元素，如下：

.randar-checkbox:checked,
.randar-checkbox:checked+.randar-top{
  transform: translateY(10px);
}

.randar-checkbox:checked~.randar-content .rander-ball,
.randar-checkbox:checked~.randar-content .rander-pos{
    display: block;
}

.randar-checkbox:checked~.randar-content::after{
    background-blend-mode: darken;
    animation: scan 5s linear infinite;
}
复制代码

3. 雷达扫描

这里我们通过雷达网格下的 after伪元素作为容器，也是通过 linear-gradient 做个有透明度的渐变灰层，再搭配 background-blend-mode 将其设置成 darken，这样就可以看到界面会被一条有明显亮度的线做了划分。

微信截图_20220411205150.png

此时，我们只要通过css3的 animation 动画在一定周期内不停转动after伪元素，就会让我们感觉这是在不停扫描一样的效果了。

结语

本期案例里面用了很多 background-blend-mode 做背景混合，虽然很好用，但IE浏览器依然是不那么友善的，其他主流浏览器支持情况表现比较出色。所以大家在开发项目时，也是根据需求谨慎使用。另外，也要巧用 background 各种背景渐变的叠加，不停的做叠加做绘制，只要你有时间有耐心，几乎可以绘制出任何画面的，非常的震撼。

微信截图_20220411224159.png