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

缺乏、安全感 2022-06-05 02:46 298阅读 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 条评论，298人围观）

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

相关阅读

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

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

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

相关百叶窗效果 html+css

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

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

相关用html做完整网页效果

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

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

相关 html做下拉列表效果

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

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

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

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

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

相关 HTML5+CSS3 做一个灵动的动画 TAB 切换效果

HTML5+CSS3 做一个灵动的动画 TAB 切换效果设计师给了一个 `tab` 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意

怼烎@/ 2022年06月08日 04:59/ 0 赞/ 178 阅读

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

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

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

相关 CSS画雷达

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

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

相关 HTML/CSS -- 利用flexBox布局

语法规则可参考：[RYF][] 布局1：高度固定，左宽度已知，右边适应 ![201812272218492.png][] <section>

待我称王封你为后i/ 2022年04月10日 05:55/ 0 赞/ 213 阅读

相关利用CSS3实现宇宙效果

效果图： ![20190717110319481.gif][] 核心代码： <!DOCTYPE html> <html lang="en">

末蓝、/ 2021年12月05日 15:34/ 0 赞/ 326 阅读