点赞 点赞 3
评论 0
书签 书签 0

css实现的一个雷达扫描效果，css真强大！

原创 已于 2025-11-14 08:11:05 修改 · 259 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
前端应用

当前文章被收录于：

前端应用
63 篇文章 0 人学习
订阅专栏 查看详情
cknow-ai 代码可运行
于 2025-11-13 10:16:14 首次发布

这几天有感于一个项目里的雷达扫描效果太差，不堪入目，于是自己尝试用css实现了一个类似的效果，现在贴出来，跟大家一起学习进步。
首先是封装过的前端雷达插件radar.js：

window.Radar = function (parent, cfg) {
    var radar = {
        parent: $(parent),
        defaultConfig: {
            frequency: 1,                          // 雷达波基础频率
            radius: '500px',                       // 默认扫描半径
            centerPoint: {x: '500px', y: '500px'}, // 默认中心坐标
            scanColor: '#00ff00',                  // 默认扫描效果颜色
            senterColor: '#00ff00'                 // 默认中心雷达效果颜色
            waveNum: 6,                            // 默认辐射波纹密度
            waveLlineWidth: '3px',                 // 默认辐射波纹线宽
            waveLineStyle: 'solid',                // 默认辐射波纹线型
            waveLineColor: '#00ff00',              // 默认辐射波纹线颜色
        },
        config: {},
        flyPoint: null,
        dom: null,
        isScan: false,
        scanInterval: null,
        hexToRgba: function(hex = '#000000', alpha = 1) {
            hex = hex.replace(/^#/, '');     

            alpha = alpha > 1 || alpha < 0 ? 1 : alpha;

            if (hex.length === 3) {
                hex = hex.split('').map(char => char + char).join('');
            }
            
            if (!/^[0-9A-F]{6}$/i.test(hex)) {
                throw new Error('Invalid hex color format');
            }
            
            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);                    
            return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
        },
        isScanOver: function(point, lineStart, lineEnd) {
            const {left: px, top: py} = point;
            const {left: x1, top: y1} = lineStart;
            const {left: x2, top: y2} = lineEnd;
            if ((x1 < x2 && (px < x1 || px > x2))
             || (y1 < y2 && (py < y1 || py > y2))
             || (x1 > x2 && (px > x1 || px < x2))
             || (y1 > y2 && (py > y1 || py < y2))) {
                return false;
            }
            
            const A = px - x1;
            const B = py - y1;
            const C = x2 - x1;
            const D = y2 - y1;
            
            const dot = A * C + B * D;
            const lenSq = C * C + D * D;
            
            let param = -1;
            if (lenSq !== 0) {
                param = dot / lenSq;
            }
            
            let xx, yy;
            
            if (param < 0) {
                xx = x1;
                yy = y1;
            } else if (param > 1) {
                xx = x2;
                yy = y2;
            } else {
                xx = x1 + param * C;
                yy = y1 + param * D;
            }
            
            const dx = px - xx;
            const dy = py - yy;
            
            return Math.sqrt(dx * dx + dy * dy) < 15;
        },
        setStyle: function() {
            var th = this;
            var cf = th.config;
            var css = ' <style type="text/css">'
                + ' /* 雷达扫描区域 */'
                + ' .radar-container {'
                + '     position: relative;'
                + '     background-color: transparent;'
                + '     overflow: hidden;'
                + '     width: '  + th.radius * 2 + 'px;'
                + '     height: ' + th.radius * 2 + 'px;'
                + '     padding: 0;'
                + '     margin: 0;'
                + '     top: ' + cf.top + 'px;'
                + '     left: ' + cf.left + 'px;'
                + '     border-radius: 50%;'
                + ' }'
                + ' /* 雷达原点 */'
                + ' .radar-center {'
                + '     position: absolute;'
                + '     top: ' + th.radius + 'px;'
                + '     left: ' + th.radius + 'px;'
                + '     transform: translate(-50%, -50%);'
                + '     width: 20px;'
                + '     height: 20px;'
                + '     background: radial-gradient(circle, ' + th.hexToRgba(cf.senterColor, 1) + ' 0%, ' + th.hexToRgba(cf.senterColor, 0.8) + ' 50%, ' + th.hexToRgba(cf.senterColor, 0.3) + ' 100%);'
                + '     border-radius: 50%;'
                + '     z-index: 10;'
                + '     animation: radar-pulse ' + (cf.frequency || 1) + 's ease-in-out infinite;'
                + ' }'
                + ' '
                + ' /* 动态扩散波纹 */'
                + ' .radar-wave {'
                + '     position: absolute;'
                + '     top: ' + th.radius + 'px;'
                + '     left: ' + th.radius + 'px;'
                + '     transform: translate(-50%, -50%);'
                + '     width: 20px;'
                + '     height: 20px;'
                + '     border: ' + cf.waveLlineWidth + ' ' + cf.waveLineStyle + ' ' + th.hexToRgba(cf.waveLineColor, 0.9) + ';'
                + '     border-radius: 50%;'
                + '     opacity: 0;'
                + '     animation: radar-wave ' + cf.waveNum + 's linear infinite;'
                + ' }'
                + ' '
                + ' /* 扫描扇区 */'
                + ' .radar-sector {'
                + '     position: relative;'
                + '     top: 0px;'
                + '     left: ' + th.radius + 'px;'
                + '     width: ' + th.radius + 'px;'
                + '     height: ' + th.radius * 2 + 'px;'
                + '     transform-origin: 0% 50%;'
                + '     background: conic-gradient('
                + '         from 0deg at 0% 50%,'
                + '         transparent 0deg,'
                + '         ' + th.hexToRgba(cf.scanColor, 0.0) + ' 0deg,'
                + '         ' + th.hexToRgba(cf.scanColor, 0.4) + ' 180deg,'
                + '         transparent 180deg'
                + '     );'
                + '     animation: radar-sector ' + (cf.frequency || 1) * 6 + 's linear infinite;'
                + '     z-index: 5;'
                + ' }'
                + ' /* 扫描线顶点坐标 */'
                + ' .radar-scan-top {'
                + '     position: relative;'
                + '     height: 1px;'
                + '     width: 1px;'
                + '     top:100%;'
                + '     left:0%;'
                + ' }'
                + ' /* 雷达原点缩放效果 */'
                + ' @keyframes radar-pulse {'
                + '     0%, 100% {'
                + '         box-shadow: 0 0 0 0 ' + th.hexToRgba(cf.senterColor, 0.4) + ';'
                + '         transform: translate(-50%, -50%) scale(1);'
                + '     }'
                + '     50% {'
                + '         box-shadow: 0 0 0 20px ' + th.hexToRgba(cf.senterColor, 0) + ';'
                + '         transform: translate(-50%, -50%) scale(1.1);'
                + '     }'
                + ' }'
                + ' '
                + ' /* 波纹效果 */'
                + ' @keyframes radar-wave {'
                + '     0% {'
                + '         width: 20px;'
                + '         height: 20px;'
                + '         opacity: 0.8;'
                + '     }'
                + '     100% {'
                + '         width: '  + th.radius * 2 + 'px;'
                + '         height: ' + th.radius * 2 + 'px;'
                + '         opacity: 0;'
                + '     }'
                + ' }'
                + ' /* 扫描效果 */'
                + ' @keyframes radar-sector {'
                + '     0% {'
                + '         transform: rotate(0deg);'
                + '     }'
                + '     100% {'
                + '         transform: rotate(360deg);'
                + '     }'
                + ' }'
                + ' /* 飞行点样式 */'
                + ' .fly-point {'
                + '     position: absolute;'
                + '     width: 20px;'
                + '     height: 20px;'
                + '     border-radius: 50%;' 
                + ' }'
                + ' /* 飞行点渐变效果 */'
                + ' .fly-point.fade-out {'
                + '     background-color: rgba(255, 255, 0, 0.1) !important;'
                + '     transition: background-color 3s ease;'
                + ' }'
                + 'tyle>';                
            $('head').append(css);
        },
        /* 扫描飞行点 */
        scan: function(){
            var th = this;
            var ctft = th.centerPointDom.offset();
            var txt = $('.flyPoint');
            th.scanInterval = setInterval(function(){
                if(th.flyPoint){
                    var dom  = th.flyPoint.dom;
                    if(dom){
                        var ptft = dom.offset();
                        var ltft = th.scanTopPointDom.offset();
                        if(!th.isScan){
                            if(th.isScanOver(ptft, ctft, ltft)){
                                th.isScan = true;
                                dom.css({backgroundColor: 'rgba(255, 255, 0, 0.8) '});
                                setTimeout(function(){
                                    dom[0].classList.add('fade-out');
                                }, 200);
                                setTimeout(function(){
                                    dom.css({backgroundColor: 'rgba(255, 255, 0, 0.1) '});
                                    dom[0].classList.remove('fade-out');
                                    th.isScan = false;
                                }, 3000);
                            }
                        }
                    }
                }
            }, 1);
        },
        /* 随机生成一个飞行点 
           本方法是为了产生一个从任意角度飞入的圆点，暂时没有想到好的算法，因此代码比较臃肿，
           希望大家能给出一个较好的算法实现。
         */
        randomFlyPoint: function(){ 
            var th = this;
            var cfg = th.config;
            var r1 = Math.random() * 4;
            var rdm1 = parseInt(Math.random() * 2 * th.radius, 10);
            var rdm2 = parseInt(Math.random() * (3 * th.radius - 200), 10) + 100;
            var points = {};
            if(r1 <= 1){
                points.start = {x: cfg.left, y: cfg.top + rdm1};
                points.end = rdm2 <= th.radius     ? {x: cfg.left + rdm2, y: cfg.top} 
                           : rdm2 <= 2 * th.radius ? {x: cfg.left + 2 * th.radius, y: cfg.top + rdm2 - th.radius}
                           :                         {x: cfg.left + rdm2 - 2 * th.radius + 100, y: cfg.top + 2 * th.radius};
            }else if(r1 <= 2){ 
                points.start = {x: cfg.left + rdm1, y: cfg.top};
                points.end = rdm2 <= th.radius     ? {x: cfg.left + 2 * th.radius, y: cfg.top + rdm2 - th.radius} 
                           : rdm2 <= 2 * th.radius ? {x: cfg.left + rdm2 - th.radius, y: cfg.top + 2 * th.radius}
                           :                         {x: cfg.left, y: cfg.top + rdm2 - 2 * th.radius + 100};
            }else if(r1 <= 3){ 
                points.start = {x: cfg.left + 2 * th.radius, y: cfg.top + rdm1};
                points.end = rdm2 <= th.radius     ? {x: cfg.left + rdm2 - 100,    y: cfg.top + 2 * th.radius} 
                           : rdm2 <= 2 * th.radius ? {x: cfg.left, y: cfg.top + rdm2 - th.radius}
                           :                         {x: cfg.left + rdm2 - 2 * th.radius - 100,    y: cfg.top};
            }else{
                points.start = {x: cfg.left + rdm1, y: cfg.top + 2 * th.radius};
                points.end = rdm2 <= th.radius     ? {x: cfg.left, y: cfg.top + rdm2 - 100} 
                           : rdm2 <= 2 * th.radius ? {x: cfg.left + rdm2 - th.radius, y: cfg.top}
                           :                         {x: cfg.left + 2 * th.radius, y: cfg.top + rdm2 - 2 * th.radius};
            }
            return {startPoint: points.start, endPoint: points.end, distince: {x: points.end.x - points.start.x, y: points.end.y - points.start.y}, time: 100, isScan: false};
        },
        /* 画面添加一个飞行点 */
        addFlyPoint: function(){
            var th = this;
            var flyPoint = th.randomFlyPoint();
            if(th.flyPoint){
                th.flyPoint.dom.remove();
                th.flyPoint = null;
            }
            var dm = flyPoint.dom = $('<div class="fly-point" style="left:' + flyPoint.startPoint.x + 'px;top:' + flyPoint.startPoint.y + 'px;"></div>').appendTo(th.dom);
            th.flyPoint = flyPoint;

            dm.animate({
                top: flyPoint.endPoint.y,
                left: flyPoint.endPoint.x
            }, flyPoint.time * 1000, 'linear', function(){
                dm.remove();
                th.flyPoint = null;
            });
        },

        /**
         * 实例化雷达
         */
        init: function(cfg){
            var th = this;
            // 合并配置
            th.config = Object.assign({}, th.defaultConfig, cfg);
            var cf = th.config;
            th.radius = parseInt(cf.radius, 10);

            // 计算雷达扫描区域起始点坐标
            cf.top = parseInt(cf.centerPoint.y, 10) - th.radius;
            cf.left = parseInt(cf.centerPoint.x, 10) - th.radius;

            // 添加样式
            var cssStr = th.setStyle();
            $('head').append(cssStr);
            
            // 初始化DOM
            var htm = '<div class="radar-container">';
            for(var i = 0; i < cf.waveNum; i++){
                htm += '    <div class="radar-wave" style="animation-delay: ' + i + 's;"></div>';
            }
            htm += ''
            + '    <div class="radar-sector"><div class="radar-scan-top"></div></div>'
            + '    <div class="radar-center"></div>'
            + '</div>';
            th.dom = $(htm).appendTo(th.parent);
            th.centerPointDom = $('.radar-center');
            th.scanTopPointDom = $('.radar-scan-top');
        }
    }
    radar.init(cfg);
    return radar;
};

$.fn.addRadar = function (cfg){
    return new Radar(this, cfg);
}

接着就是来个网页，调用该radar：

<!DOCTYPE html>
<html style="font-size: 20px;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>雷达扫描效果</title>
    <link href="../img/favicon.ico" rel="icon" type="image/x-icon">
    <link href="../css/site.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/modernizr-2.6.2.js"></script>
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../js/radar.js"></script>
    <style type="text/css">
        .addFlyBtn{
            position: absolute; width: 160px;height: 40px;line-height: 40px;top: 60px; left:1500px; font-size: 16px; font-weight: bold; border-radius: 5px; text-align: center;  background-color: rgba(30, 60, 140, 0.6); cursor: pointer;
        }
    </style>
</head>

<body style="font-size: 20px;">
    <div class="body" style="background: url(../img/map.png) no-repeat 0 0; background-size: cover;"></div>
    <div class="addFlyBtn">随机一个飞行点</div>
</body>
    <script type="text/javascript">
        var radar = $('.body').addRadar({
            waveNum: 8,
            frequency: 1,
            radius: '400px',
            centerPoint: { x: '450px', y: '450px'}
        });

        $('.addFlyBtn').on('click', function(){
            radar.addFlyPoint();
            if(!radar.scanInterval){
                radar.scan();
            }
        });
      
    </script>
</html>

本插件还有部分参数没有完成替代，有兴趣的同学可以自行补完。整个雷达效果其实代码很少，倒是为了加入飞行点扫描效果，增加了大量代码，有能力的同学，可以尝试帮忙简化一下这块的代码。

标签
#css #前端 #雷达扫描效果
分类 it交互设计（ux）
实用CSS3模拟实现一个雷达扫描动画特效
qq_43787947的博客
07-04 1515
【代码】实用CSS3模拟实现一个雷达扫描动画特效。
css实现扫码循环扫描特效
qq_43206280的博客
01-23 2223
开发过程中总会遇到不常见的需求，移动端扫描图片加个特效，这里记录一下实现场景。扫码图片scanQr.svg文件。
Cesium 1.107 雷达平扫实战：PostProcessStage 实现 3 秒动态扫描与性能分析
weixin_34007886的博客
07-09 319
本文详细介绍了如何在Cesium 1.107中利用PostProcessStage实现高性能的雷达平扫效果。通过完整的CircleScan类实现和着色器算法解析，展示了3秒动态扫描的核心技术，包括几何计算、着色器编程和多实例性能优化。文章还提供了实战应用中的常见问题排查和性能测试数据，帮助开发者高效集成雷达扫描特效。
CSS3模拟雷达扫描动画效果
06-11
这是一款效果逼真的CSS3模拟雷达扫描动画效果，网页雷达扫描动画特效素材。
从UI设计到数据可视化：eCharts雷达图样式定制的艺术与科学
weixin_28520495的博客
03-26 382
本文深入探讨了eCharts雷达图的样式定制艺术与科学，从UI设计心理学到技术实现全面解析。通过自定义面积覆盖颜色、渐变填充等高级技巧，帮助开发者创建既美观又专业的数据可视化图表，提升数据传达效率。文章包含大量实用代码示例和设计原则，是前端开发者和设计师的必备指南。
css3-Radar:CSS3 雷达效果实验
05-17
css3-Radar（css3 雷达效果） 效果展示 介绍 简单的雷达图扫描图形，模拟了目标点，目标掉点的运行轨迹在y=x的直线上随机运动； 主要技术总结 Gradients(渐变) background 下可以使用多个渐变，使用,隔开 Linear-Gradients(线性渐变) 该实例使用在（扫描器） Linear-Gradients(agree,firstColor,secondColor，...moreColor) Linear-Gradients（45deg，rgba（红色，绿色，蓝色，透明率）20%，rgba（红色，绿色，蓝色，透明率）80%） - 最后百分号为从上到下，纯色的开始的位置； - 还有一组repeat的用法就是重复使用 Radial-Gradient（径向渐变） 该实例使用在画雷达图 background: radial-gradient(center, shap
HTML5+CSS3实现3D雷达扫描动画特效项目实战
weixin_31749299的博客
12-01 610
最后送大家一份【避坑指南】：问题正确做法图像模糊用设Canvas尺寸，别用CSS动画卡顿用+ 时间差驱动没有立体感父容器加子元素变形失败检查是否正确移动端体验差添加响应式断点 + 减少动画复杂度用户反感动画尊重这种高度集成的设计思路，正引领着智能可视化设备向更可靠、更高效的方向演进。🎯当你下次接到“做个炫酷雷达动画”的需求时，不要再慌张地说“要不要引入Three.js？
实用CSS3模拟实现一个雷达探测扫描动画特效
xingyu_qie的专栏
04-04 5045
之前好长时间住在唐家岭，从路口往上地走的时候，总能看见一个一个的雷达，好壮观，今天用CSS3实现一个雷达探测扫描的效果。
纯css3仿雷达图扫描
m0_68275786的博客
01-03 602
css3 雷达图
Leaflet 雷达扫描插件：打造逼真的地图雷达效果
weixin_41715208的博客
06-23 1595
leaflet-radar-scan是一款功能强大的Leaflet地图雷达扫描插件，具备经典雷达效果、智能目标检测和地图自适应缩放特性。该插件提供四大可定制元素（外圆、同心圆、方位线、中心点），支持实时样式调整和丰富的事件监听。安装方式灵活，支持直接下载或npm安装，基础使用方法简单明了。插件采用开源形式，适用于军事、监控、游戏等需要雷达效果的应用场景，是Leaflet平台上实现专业级雷达扫描的理想选择。
纯CSS3打造蓝色光晕按钮与雷达扫描动画特效
weixin_32251525的博客
09-11 1247
CSS3的出现，极大丰富了前端动画的表现形式，使开发者能够在不依赖JavaScript的情况下，实现复杂而流畅的动画效果。其核心特性包括过渡（transition）、关键帧动画（@keyframes）、阴影（box-shadow）以及滤镜（filter）等，这些特性共同构成了CSS3动画的强大基础。通过“带蓝色光晕的按钮”和“雷达监测屏幕”两个案例，本课程将深入解析CSS3动画的构建逻辑与视觉实现方式，展示其在现代网页设计中的高阶应用价值。状态视觉变化CSS属性/伪类默认状态。
通过Front-End Daily Challenges项目学习CSS创意视觉效果的5个秘诀
gitblog_00809的博客
07-02 851
Front-End Daily Challenges项目是一个包含170+前端创意作品的实践宝库，特别适合想要提升CSS视觉效果技能的开发者。本文将分享5个实用秘诀，帮助你快速掌握CSS动画与交互效果的核心技巧，从基础过渡到高级变换，打造令人惊艳的用户界面。 ## 秘诀1：掌握基础过渡动画，开启视觉效果之旅 CSS过渡（transition）是创建平滑动画的基础。在项目的[001-button
CSS的常用动画
文摘资讯
05-02 481
CSS实现开关<style> .check-wrap { margin-bottom: 20px; text-align: center; } .switch { position: absolute; clip: rect(0, 0, 0, 0); } label { margin-righ...
MATLAB仿真雷达干扰样式：从压制到欺骗的建模与效果评估
最新发布
weixin_30715523的博客
07-28 474
雷达信号处理是电子对抗领域的核心技术，其核心原理在于通过发射电磁波并分析回波来探测目标。在复杂电磁环境中，干扰与抗干扰技术成为决定雷达性能的关键。压制式干扰通过注入强噪声降低信干噪比，而欺骗式干扰则通过生成虚假目标信号误导雷达系统，二者共同构成了电子对抗的基本战术。从工程实践角度看，利用MATLAB进行雷达干扰样式仿真，能够高效构建包含噪声调频干扰和距离波门拖引等典型样式的测试环境，通过参数化建模和可视化分析，定量评估干扰对雷达检测概率、虚警率等关键指标的影响，为雷达系统设计、抗干扰算法验证以及电子战策略研
字 掉落 炫酷 网站_16个富有创意的HTML5 Canvas动画特效集合
weixin_39559804的博客
12-19 529
本文作者html5tricks，转载请注明出处1、HTML5 Canvas高空瀑布下落湖面动画HTML5Canvas是一个神奇的网页技术，我们在Canvas画布上可以做任何有趣的事情。今天要分享的这款瀑布动画就是利用了HTML5 Canvas的相关特性实现的。记得我们在很早以前给大家介绍过一个超逼真的HTML5瀑布动画，也是在Canvas上完成的，非常酷。今天的这个瀑布更加美妙，因为它模拟了整个...
有趣的css - 动态雷达扫描
设计师工作日常
04-12 1457
使用 css 实现一个动态的雷达扫描，快学起来吧！
CSS样式实现雷达扫描动效
qq_45642765的博客
03-15 1932
CSS实现雷达扫描动效
css 雷达扫描图
宁夏前端工程师，马卫斌，wx：1457508895
10-24 696
【代码】css 雷达扫描图。
CSS 6 ，CSS雷达光波效果（前端雷达光波效果）
前端架构师（AI + GIS + Web3D）& 数字芯片系统架构师（FPGA），NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.csdn.net）
08-01 1348
⭐ CSS雷达光波效果是一种视觉动画效果，常用于模仿雷达扫描或检测的视觉反馈。这种效果通常涉及到动态的圆形或弧形图案，它们从一个中心点向外扩散，类似于水面上的涟漪或雷达扫描线。这里来分享记录，CSS雷达光波效果的关键技术和步骤。
CSS3雷达扫描效果
u011626414的专栏
07-23 1088
这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性，以及添加更多的细节和效果。要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（元素在2秒内从0度旋转到360度，从而实现连续的扫描效果。属性设置为50%，这会将扫描线的顶部置于雷达圆的中心，而。的圆形div作为雷达的主体，并在其中放置了一个名为。则会将其向上移动自身高度的一半，从而实现垂直居中。的垂直线，这条线将作为雷达的扫描线。，确保旋转的起点在元素的顶部中心。进行旋转，模拟雷达扫描的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值