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

最新推荐文章于 2023-04-23 10:58:36 发布

qq20004604

最新推荐文章于 2023-04-23 10:58:36 发布

阅读量3.3k

点赞数 1

分类专栏：前端的小玩意文章标签：雷达效果

本文链接：https://blog.csdn.net/qq20004604/article/details/78542960

版权

前端的小玩意专栏收录该内容

49 篇文章 2 订阅

订阅专栏

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>

qq20004604

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用html和css做【雷达】效果

1、实现原理外层套一个div，用于作为参考定位。中间层作为雷达旋转的容器，因为雷达效果是以屏幕中间（这里设置为外层div的中间），进行360度旋转，因此旋转的是这个div。内层用于实现雷达的样式，需要渐变，但是单纯的渐变和雷达效果有区别，因此还需要旋转，并且被父级div遮罩住部分，才能实现出雷达所表现的样式。2、实现代码<!doctype html><html lang="en"><head>
复制链接

扫一扫