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

港控/mmm° 2023-09-25 21:47 50阅读 0赞

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

![d823dd5a09374c7c8a29616f02f00877.gif][]

**目录**

1. 实现思路

2. HTML部分的实现

3. 背景的效果

4. 蜘蛛网盘的效果

5. 扫描转动效果

6. 被扫描到的光点儿

7. 完整源代码

8. 最后

--------------------

#### 1. 实现思路 ####

实现思路

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

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

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

以及被扫描出的亮点儿。

#### 2. HTML部分的实现 ####

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

#### 3. 背景的效果 ####

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

![6fa12b9e9cdd4fda9eafdaf5e405afa8.png][]

#### 4. 蜘蛛网盘的效果 ####

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

![14ded186fd3c46a3a649a761bb532d49.png][]

#### 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%);

![d282e59d288c498f97ae0a7750f1dedc.png][]

#### 6. 被扫描到的光点儿 ####

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

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

![739f51498f454c1a99d98bf0da34ecfe.png][]

#### 7. 完整源代码 ####

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

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
            <title>CSS3实现雷达扫描特效</title>
    
            <style>
    
                * {
      box-sizing: border-box;
    }
    
    html {
      height: 100%;
      background-color: #380d0d;
      font-size: 10px;
    }
    
    body {
      background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);
      background-size: 7rem 7rem;
      background-position: -5.2rem -5.2rem;
      width: 100%;
      height: 100%;
      position: relative;
      padding: 0;
      margin: 0;
      font-size: 1.6rem;
    }
    
    .tangjialing {
      background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
      background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
      width: 75vw;
      height: 75vw;
      max-height: 75vh;
      max-width: 75vh;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 0.2rem solid #0cdd36;;
      overflow: hidden;
    }
    .tangjialing:before {
      content: ' ';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: bei 5s infinite;
      animation-timing-function: linear;
      animation-delay: 1.4s;
    }
    .tangjialing:after {
      content: ' ';
      display: block;
      background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);
      width: 50%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      animation: zhuan 5s infinite;
      animation-timing-function: linear;
      transform-origin: bottom right;
      border-radius: 100% 0 0 0;
    }
    
    @keyframes zhuan {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes bei {
      14% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
      }
      14.0002% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
      }
      25% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
      }
      26% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 1;
      }
      100% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 0;
      }
    }
    
            </style>
    
    </head>
    <body>
    
    <div class="tangjialing"></div>
    
    
    </body></html>

#### 8. 最后 ####

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

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

[d823dd5a09374c7c8a29616f02f00877.gif]: https://img-blog.csdnimg.cn/d823dd5a09374c7c8a29616f02f00877.gif
[6fa12b9e9cdd4fda9eafdaf5e405afa8.png]: https://img-blog.csdnimg.cn/6fa12b9e9cdd4fda9eafdaf5e405afa8.png
[14ded186fd3c46a3a649a761bb532d49.png]: https://img-blog.csdnimg.cn/14ded186fd3c46a3a649a761bb532d49.png
[d282e59d288c498f97ae0a7750f1dedc.png]: https://img-blog.csdnimg.cn/d282e59d288c498f97ae0a7750f1dedc.png
[739f51498f454c1a99d98bf0da34ecfe.png]: https://img-blog.csdnimg.cn/739f51498f454c1a99d98bf0da34ecfe.png