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 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
详解javascript中的Error对象
2019/04/25 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python中的闭包函数
2018/02/09 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
诚信考试倡议书
2014/04/15 职场文书
高中生评语大全
2014/04/25 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
小学生差生评语
2014/12/29 职场文书
幽灵公主观后感
2015/06/09 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
初中生活随笔
2015/08/15 职场文书