首页 前端知识 CSS3雷达扫描效果

CSS3雷达扫描效果

2024-08-04 00:08:14 前端知识 前端哥 932 440 我要收藏

CSS3雷达扫描效果icon-default.png?t=N7T8https://www.bootstrapmb.com/item/14840

要创建一个CSS3的雷达扫描效果,我们可以使用CSS的动画(@keyframes)和transform属性。以下是一个简单的示例,展示了如何创建一个类似雷达扫描的动画效果:

HTML:

 
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雷达扫描效果</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="radar">
<div class="beam"></div>
</div>
</body>
</html>

CSS (styles.css):

 
cssbody {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
overflow: hidden;
}

.radar {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #333;
overflow: hidden;
}

.beam {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 100%;
background-color: #fff;
transform-origin: top center;
animation: radar-scan 2s linear infinite;
}

@keyframes radar-scan {
0% {
transform: rotate(0deg) translateY(-50%);
}
100% {
transform: rotate(360deg) translateY(-50%);
}
}

在上面的代码中,我们定义了一个名为.radar的圆形div作为雷达的主体,并在其中放置了一个名为.beam的垂直线,这条线将作为雷达的扫描线。.beam元素使用CSS动画radar-scan进行旋转,模拟雷达扫描的效果。

动画radar-scan通过@keyframes规则定义,使.beam元素在2秒内从0度旋转到360度,从而实现连续的扫描效果。transform-origin属性设置为top center,确保旋转的起点在元素的顶部中心。

注意,translateY(-50%)用于将扫描线垂直居中在雷达圆内。由于.beamtop属性设置为50%,这会将扫描线的顶部置于雷达圆的中心,而translateY(-50%)则会将其向上移动自身高度的一半,从而实现垂直居中。

这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性,以及添加更多的细节和效果。

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14737.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!