利用html和css做【雷达】效果

缺乏、安全感 2022-06-05 02:46 355阅读 0赞

### 1、实现原理 ###

外层套一个div，用于作为参考定位。

中间层作为雷达旋转的容器，因为雷达效果是以屏幕中间（这里设置为外层div的中间），进行360度旋转，因此旋转的是这个div。

内层用于实现雷达的样式，需要渐变，但是单纯的渐变和雷达效果有区别，因此还需要旋转，并且被父级div遮罩住部分，才能实现出雷达所表现的样式。

### 2、实现代码 ###

<!doctype html>
    <html lang="en">
    <head>
    </head>
    <body>
    <div class="box">
        <div class="cover">
            <div class="sector"></div>
        </div>
    </div>
    <style> /* 父容器，撑满整个页面 */ .box { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; cursor: default; } /* 子容器，这个会一直旋转，并对雷达效果的div元素的超出部分作出隐藏功能 */ .cover { position: relative; left: -100%; top: -100%; width: 150%; height: 150%; overflow: hidden; transform-origin: 100% 100%; /* 3s是雷达效果旋转一圈的时间 */ animation: rotation 3s linear infinite; } /* 雷达效果，是一个div，利用渐变，生成雷达的从深到淡的效果，然后利用父元素遮住部分，从而来实现雷达效果 */ .sector { position: absolute; bottom: 0; right: 0; transform: rotate(15deg); transform-origin: 100% 100%; background-color: black; width: 100%; height: 80%; background: linear-gradient(185deg, rgba(80, 130, 255, 1) 40%, rgba(255, 255, 255, 0) 90%); } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关利用Html+纯CSS实现计时器效果

问题描述最近在学习的过程中一直静不下心来，在网上找了一些计时器软件安装包带很多第三方流氓软件，决定干脆自己做一款。开始考虑利用Js实现计时逻辑业务，后面仔细想了一下...

素颜马尾好姑娘i/ 2024年04月18日 12:03/ 0 赞/ 100 阅读

相关 HTML+CSS图片动画效果

一运行效果图 ![b634d1f83ef74e96b2d4dc2f209bcb33.png][] 二图片资源 ![4f11d32caa6d41babbf0e348

青旅半醒/ 2024年02月20日 09:36/ 0 赞/ 76 阅读

相关 ⑨HTML+CSS 动画效果（animation）

动画效果过渡 ※ 动画 ※ 变形 ※ z轴平移旋转 ※ 缩放 ※ -------------------- 本人是个新手，写下

短命女/ 2023年07月21日 05:57/ 0 赞/ 48 阅读

相关 [cesium] 卫星雷达传感器,雷达探测效果

前言整理了一下关于卫星视锥和雷达测控的三维效果。包含视锥体,传感器,扫描探测等效果修改部分插件，支持最新版cesium 效果相控雷达传感器 ![20

柔情只为你懂/ 2023年02月13日 04:59/ 0 赞/ 44 阅读

相关百叶窗效果 html+css

![在这里插入图片描述][20201222143415410.gif] <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年12月29日 11:28/ 0 赞/ 182 阅读

相关用html做完整网页效果

用html做完整网页效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /

淡淡的烟草味﹌/ 2022年11月12日 14:56/ 0 赞/ 183 阅读

相关 html做下拉列表效果

html做下拉列表效果文章目录 html做下拉列表效果 ![在这里插入图片描述][20210323223705390.gif] ------------

╰+哭是因爲堅強的太久メ/ 2022年11月12日 10:59/ 0 赞/ 227 阅读

相关 134.HTML+CSS做一个聚光灯的效果送给心上人

效果 (源码网盘地址在最后) ![21377bc7ae6be11b6e9c2a37799bc53d.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

亦凉/ 2022年10月27日 01:47/ 0 赞/ 140 阅读

相关利用html和css做【雷达】效果

1、实现原理外层套一个div，用于作为参考定位。中间层作为雷达旋转的容器，因为雷达效果是以屏幕中间（这里设置为外层div的中间），进行360度旋转，因此旋转的是这个

缺乏、安全感/ 2022年06月05日 02:46/ 0 赞/ 356 阅读

相关 CSS画雷达

效果图：![这里写图片描述][70] <!doctype html> <html lang="en"> <head> <meta ch

刺骨的言语ヽ痛彻心扉/ 2022年05月31日 14:50/ 0 赞/ 255 阅读