首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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雷达扫描图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

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

- Author -

qq_1075654056

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
css3属性选择器 “~”（波浪号） “，”（逗号） “+”（加号）和 “>”（大于号）
Apr 19 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
音箱(1) VOLVO(1) 晶体管(2) 66-XI(1) BOSE(2) MOTOROLA(1) 收信机(3) 摩托罗拉(1) 军机(1) 77A(2)
You might like
ezSQL PHP数据库操作类库
2010/05/16 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP设计模式（八）装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
2018/11/13 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
js实现随机数小游戏
2019/06/28 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
python下载图片实现方法(超简单)
2017/07/21 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
婚前财产公证书
2014/04/10 职场文书
城管个人总结
2015/02/28 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书