CSS3 实现雷达扫描图的示例代码


Posted in HTML / CSS onSeptember 21, 2020

通过css3实现炫酷的雷达扫描图:

CSS3 实现雷达扫描图的示例代码

直接上代码:

// index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>雷达扫描图</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div class="radar"></div>

</body>

</html>
//index.css
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    background-color: #111;
    font-size: 10px;
}


body {
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);
    background-size: 8rem 8rem;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
}

.radar {
    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%, rgba(32, 255, 77, 0) 50.2%),
        -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #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 #20ff4d;
    overflow: hidden;
}

.radar:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: blips 5s infinite;
    animation-timing-function: linear;
    animation-delay: 1.4s;
}

.radar:after {
    content: ' ';
    display: block;
    background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: radar-beam 5s infinite;
    /* 速度相同 */
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
}

@keyframes radar-beam {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes blips {
  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;
  }
}

ps: 转自https://www.html5tricks.com/pure-css3-radar-scanning.html

总结

到此这篇关于CSS3 实现雷达扫描图的示例代码的文章就介绍到这了,更多相关css3雷达扫描图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 #HTML / CSS
Css3实现无缝滚动防抖
Sep 14 #HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 #HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 #HTML / CSS
css3实现动画的三种方式
Aug 24 #HTML / CSS
You might like
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
在Python中执行系统命令的方法示例详解
2017/09/14 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
django表单的Widgets使用详解
2019/07/22 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
python中的列表和元组区别分析
2020/12/30 Python
设计顾问服务计划书
2014/05/04 职场文书
英语求职信范文
2014/05/23 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android