实用CSS3模拟实现一个雷达探测扫描动画特效

之前好长时间住在唐家岭，从路口往上地走的时候，总能看见一个一个的雷达，好壮观，今天用CSS3实现一个雷达探测扫描的效果。

 

目录

1. 实现思路

2. HTML部分的实现

3. 背景的效果

4.  蜘蛛网盘的效果

5. 扫描转动效果

6.  被扫描到的光点儿

7. 完整源代码

8. 最后

---

1. 实现思路

实现思路

包含夜色背景，其实就是为了好看，也是为了真实，好像有种真实的效果；

包含蜘蛛网盘，又像一个靶子；

实现扫描体的转动效果，而且扫描体会带有阴影尾巴，更加真实；

以及被扫描出的亮点儿。

2. HTML部分的实现

HTML部分，包含页面背景，包含多层蜘蛛王盘，包含转动元素，包含扫描结果，猛地一看元素非常多，但在页面性能优化中，HTML标签元素的多少，也会被评定为一个标准，所以我们只添加一个DIV元素，尽量多的都用CSS3来实现

3. 背景的效果

背景的效果为了体现出网格的状态，采用了background-image的复合属性，而属性值的linear-gradient保证了横线和纵线的展示

4.  蜘蛛网盘的效果

蜘蛛网盘其实可以做成多个DIV嵌套，然后分别设置其border-radius属性为50%，然后一层比一层小即可。然后再横向和纵向分别添加一个边框，但这样会造成HTML元素的增多，所以我们采用了radial-gradient背景色值的填充，而正是这一复合属性，追加的越多，就越有效果

5. 扫描转动效果

扫描转动效果使用了我们熟知的animation 属性，而动画中重点在于从0度一直转动到360度这个过程

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

 同时在转动的时候，会有一个尾巴阴影效果，随着转动而转动

background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);

 

6.  被扫描到的光点儿

我们看这个动画效果，是在扫描体经过后，才闪动出现的，而且还会自动闪烁消失，这里采用opacity属性的动画来模拟闪烁过程，同时使用radial-gradient的复合背景属性设置光点儿的个数，位置等

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

 

 

 

7. 完整源代码

下面，把完整源代码给出来，需要的小伙伴可以自行复制粘贴到自己的HTML中去哦

8. 最后

最后，希望这个雷达扫描效果，可以给你抛砖引玉，实现更多的需求效果。

• 【手把手、从零到一】SpringBoot+SpringCloud+Vue前后端分离实战项目，专栏持续火热更新中。。。
• 主流技术，细节到位，前后端由两位【十年多】的高级架构师操刀
• 作为毕设项目、入门项目、或者准备进阶提升竞争力的小伙伴，可以【订阅本专栏】哦
• 前端部分 ：https://blog.csdn.net/xingyu_qie/category_12222258.html
• 服务端部分 ：https://blog.csdn.net/scm_2008/category_12236048.html
• 粉丝福利：订阅的粉丝可加微信，对文章的内容进行【一对一指导】！