有趣的css - 动态雷达扫描

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 实现一个动态的雷达扫描，快学起来吧！

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

目录

  • 整体效果
  • 核心代码
    • html 代码
    • css 部分代码
  • 完整代码如下
    • html 页面
    • css 样式
    • 页面渲染效果

整体效果

知识点：
① animation 动画属性中 animation-direction 以及 steps() 参数的使用

思路： 先绘制出整体大圆，然后使用创建伪元素画出内里的小圆，并加上虚线边框；然后绘制出雷达层，加上动画旋转；再给雷达内增加几个闪烁的圆点；最后外层套一个小动画边框。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="leidabox50"></div>
<div class="leida50">
  <div class="line50"></div>
  <div class="guangdian50">
    <span class="dian50"></span>
  </div>
</div>

雷达的主体。

css 部分代码

.leidabox50{
  width:220px;
  height:220px;
  border:4px solid rgba(0,0,0,0);
  border-top-color: #33B589;
  border-bottom-color: #33B589;
  border-radius:50%;
  position: absolute;
  animation:leidabox-eff-50 10s linear infinite;
  animation-direction:reverse;
}
@keyframes leidabox-eff-50{
  to{
    transform:rotate(360deg);
  }
}
.leida50{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #31FFBA;
  border-radius: 50%;
  border: 1px solid #33B589;
}
.leida50:before,.leida50:after{
  content: '';
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px dashed rgba(0,0,0,0.14);
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  position: absolute;
  z-index: 3;
}
.leida50:after{
  width: 60px;
  height: 60px;
  position: absolute;
  z-index: 10;
}
.line50{
  width: 100px;
  height: 100px;
  background-color: rgba(127,255,212,0.4);
  border-radius: 0 0 0 100%;
  position: absolute;
  left: 0;
  top: 100px;
  z-index: 100;
  animation: zhuaneff50 5s linear infinite;
  transform-origin: 100px 0;
}
.line50:after{
  content: '';
  width: 8px;
  height: 8px;
  background-color: rgba(255,255,255,0.6);
  position: absolute;
  top: -4px;
  right: -4px;
  border-radius: 50%;
}
@keyframes zhuaneff50{
  to {
    transform: rotate(360deg);
  }
}
.guangdian50{
  position: absolute;
  bottom: 66px;
}
.dian50,.dian50:after,.dian50:before{
  width: 7px;
  height: 7px;
  background-color: #33B589;
  position: absolute;
  left: -20px;
  border-radius: 50%;
  animation: eff50 5s steps(6) infinite;
  z-index: 999;
}
.dian50:after{
  content: '';
  width: 6px;
  height: 6px;
  top: 12px;
  left: 44px;
}
.dian50:before{
  content: '';
  width: 3px;
  height: 3px;
  top: 40px;
  left: 34px;
}
@keyframes eff50{
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  25%{
    opacity: 1;
    transform: translate(-10px, -18px);
  }
  50%{
    opacity: 0;
    transform: translate(-18px, -20px);
  }
  75%{
    opacity: 1;
    transform: translate(-24px, -18px);
  }
  100%{
    opacity: 0;
    transform: translate(-34px, -24px);
  }
}
.guangdian50:after,.guangdian50:before{
  content: '';
  width: 6px;
  height: 6px;
  background-color: #33B589;
  position: absolute;
  top: -100px;
  left: 30px;
  border-radius: 50%;
  z-index: 900;
  animation: eff501 5s steps(6) both infinite;
}
.guangdian50:before{
  width: 7px;
  height: 7px;
  top: -20px;
  left: 40px;
}
@keyframes eff501{
  0% {
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  75%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

1、.leida50 画出最大的雷达圆形主体，然后通过 .leida50:before 和 .leida50:after 伪元素创建里面的两个小圆，并给两个小圆加上一点阴影效果。

2、.line50 绘制一个矩形，并给它的一个角加上圆角 border-radius: 0 0 0 100%; ，并通过 transform-origin 定位其原点，加上动画旋转，雷达就开始旋转扫描了； 然后
利用 .line50:after 伪元素给中心加上一个固定点，这样整体的雷达扫描区就完成了。

3、再在雷达主体上绘制几个移动的点，利用 .dian50 、.dian50:after 和 .dian50:before 绘制 3 个大小不一的圆点，并且定位到不同的位置，然后通过加上 animation 动画，设置 steps() 参数，使这 3 个点边闪烁边移动。

4、然后再加上两个固定的圆点，同样加上 animation 动画，设置 steps() 参数，让这 2 个圆点同前面的 3 个圆点同时闪烁。

5、在外层用 .leidabox50 绘制出两个半边框，加上 animation 动画，并设置 animation-direction 参数，使反向旋转。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>动态雷达扫描</title>
  </head>
  <body>
    <div class="app">
      <div class="leidabox50"></div>
      <div class="leida50">
        <div class="line50"></div>
        <div class="guangdian50">
          <span class="dian50"></span>
        </div>
      </div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leidabox50{
  width:220px;
  height:220px;
  border:4px solid rgba(0,0,0,0);
  border-top-color: #33B589;
  border-bottom-color: #33B589;
  border-radius:50%;
  position: absolute;
  animation:leidabox-eff-50 10s linear infinite;
  animation-direction:reverse;
}
@keyframes leidabox-eff-50{
  to{
    transform:rotate(360deg);
  }
}
.leida50{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #31FFBA;
  border-radius: 50%;
  border: 1px solid #33B589;
}
.leida50:before,.leida50:after{
  content: '';
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px dashed rgba(0,0,0,0.14);
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  position: absolute;
  z-index: 3;
}
.leida50:after{
  width: 60px;
  height: 60px;
  position: absolute;
  z-index: 10;
}
.line50{
  width: 100px;
  height: 100px;
  background-color: rgba(127,255,212,0.4);
  border-radius: 0 0 0 100%;
  position: absolute;
  left: 0;
  top: 100px;
  z-index: 100;
  animation: zhuaneff50 5s linear infinite;
  transform-origin: 100px 0;
}
.line50:after{
  content: '';
  width: 8px;
  height: 8px;
  background-color: rgba(255,255,255,0.6);
  position: absolute;
  top: -4px;
  right: -4px;
  border-radius: 50%;
}
@keyframes zhuaneff50{
  to {
    transform: rotate(360deg);
  }
}
.guangdian50{
  position: absolute;
  bottom: 66px;
}
.dian50,.dian50:after,.dian50:before{
  width: 7px;
  height: 7px;
  background-color: #33B589;
  position: absolute;
  left: -20px;
  border-radius: 50%;
  animation: eff50 5s steps(6) infinite;
  z-index: 999;
}
.dian50:after{
  content: '';
  width: 6px;
  height: 6px;
  top: 12px;
  left: 44px;
}
.dian50:before{
  content: '';
  width: 3px;
  height: 3px;
  top: 40px;
  left: 34px;
}
@keyframes eff50{
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  25%{
    opacity: 1;
    transform: translate(-10px, -18px);
  }
  50%{
    opacity: 0;
    transform: translate(-18px, -20px);
  }
  75%{
    opacity: 1;
    transform: translate(-24px, -18px);
  }
  100%{
    opacity: 0;
    transform: translate(-34px, -24px);
  }
}
.guangdian50:after,.guangdian50:before{
  content: '';
  width: 6px;
  height: 6px;
  background-color: #33B589;
  position: absolute;
  top: -100px;
  left: 30px;
  border-radius: 50%;
  z-index: 900;
  animation: eff501 5s steps(6) both infinite;
}
.guangdian50:before{
  width: 7px;
  height: 7px;
  top: -20px;
  left: 40px;
}
@keyframes eff501{
  0% {
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  75%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

[1] 原文阅读

CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。

我是 Just，这里是「设计师工作日常」，求点赞求关注！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/536592.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

当然IP总流量卵化手14无线天线上实际操作夏令营【第9期】月入5w 上百万爆款打造 (74节)

当然IP总流量卵化手14无线天线上实际操作夏令营【第9期】月入5w 上百万爆款打造 (74节)

在2023年&#xff0c;我依照导师的”项目销售”策略&#xff0c;成功地实现了超过100万的纯利润。在当前经济低迷的大环境下&#xff0c;许多大型企业纷纷裁员&#xff0c;这使得许多人面临着找不到满意工作的困境。与此同时&#xff0c;由于疫情引发的口罩需求&#xff0c;使得…
阅读更多...
算法刷题Day31 | 455.分发饼干、376. 摆动序列、53. 最大子数组和

算法刷题Day31 | 455.分发饼干、376. 摆动序列、53. 最大子数组和

目录 0 引言1 分发饼干1.1 我的解题1.2 更好的解题 2 摆动序列2.1 我的解题2.2 我的错误原因&#xff08;GPT分析&#xff09;2.3 改进 3 最大子数组和3.1 我的解题 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题&…
阅读更多...
爬虫实战：我国城市的地铁数据以及分析

爬虫实战：我国城市的地铁数据以及分析

文章目录 1 引言2 项目背景3 技术栈和工具选择4 数据爬取4.1 爬虫设计4.2 代码实现4.3 数据保存4.4 关键点分析 5 数据处理与分析5.1 数据清洗5.2 数据分析5.3 关键点分析 6 完整代码以及结果展示7 小分享 1 引言 本文将指导你如何通过Python从高德地图爬取中国城市地铁站数据…
阅读更多...
5G-A有何能耐？5G-A三载波聚合技术介绍

5G-A有何能耐？5G-A三载波聚合技术介绍

2024年被称作5G-A元年。5G-A作为5G下一阶段的演进技术&#xff0c;到底有何能耐呢&#xff1f; 三载波聚合&#xff08;3CC&#xff09;被认为是首个大规模商用的5G-A技术&#xff0c;将带来手机网速的大幅提升。 █ 什么是3CC 3CC&#xff0c;全称叫3 Component Carriers…
阅读更多...
前端js基础知识（八股文大全）

前端js基础知识（八股文大全）

一、js的数据类型 值类型(基本类型)&#xff1a;数字(Number)、字符串&#xff08;String&#xff09;、布尔(Boolean)、对空&#xff08;Null&#xff09;、未定义&#xff08;Undefined&#xff09;、Symbol,大数值类型(BigInt) 引用数据类型&#xff1a;对象(Object)、数组…
阅读更多...
HNUST湖南科技大学嵌入式开发板使用-2024

HNUST湖南科技大学嵌入式开发板使用-2024

目录 1.需要准备的软件(版本必须相同)꒰ঌ( ⌯ ⌯)໒꒱ 2.下载链接地址⌯▾⌯ 3.软件安装教程 4.安装好了&#xff0c;正常情况会是什么样子呢&#xff1f;(๑•̌.•๑) 4.1.拆入第一个接口(串口com接口是用来上传代码的ฅ˙Ⱉ˙ฅ) 4.2.拆入第三个接口&#xff08;SWD Jlink口…
阅读更多...
android android.permission.MANAGE_EXTERNAL_STORAGE使用

android android.permission.MANAGE_EXTERNAL_STORAGE使用

android11 及以上版本&#xff0c;如果release版本要读取外部存储公共目录&#xff0c;即sdcard公共目录&#xff0c;需要在androidManifest.xml下申明 <uses-permission android:name"android.permission.MANAGE_EXTERNAL_STORAGE" /> 如果要发版到海外&…
阅读更多...
数据资产与数据要素的重要性及数据资产入表的实践指南

数据资产与数据要素的重要性及数据资产入表的实践指南

## 引言在当今快速发展的数字化时代&#xff0c;数据资产已经成为企业最宝贵的资源之一。数据资产不仅对企业的运营决策有着至关重要的影响&#xff0c;而且在企业的财务健康和市场竞争力方面扮演着核心角色。数据要素&#xff0c;作为构成数据资产的基本单元&#xff0c;其管理…
阅读更多...
Centos Docker Oracle11g 密码过期修改

Centos Docker Oracle11g 密码过期修改

症状&#xff1a; Centos Oracle11g环境变量配置 如果没有配置环境变量&#xff0c;需要先配置Oracle环境变量&#xff0c;否则执行sqlplus时会提示&#xff1a;SP2-0750: You may need to set ORACLE_HOME to your Oracle software directory 配置方法&#xff1a; 第一步&a…
阅读更多...
C++ 2024-4-2 作业

C++ 2024-4-2 作业

1.模板类实现顺序栈 #include <iostream> #define MAX 8 using namespace std; template<typename T> class stack {T data[MAX];int top; public:stack():top(-1){}bool empty_stack();bool full_stack();void push_stack(T data);void pop_stack();void show();…
阅读更多...
定长子串中元音的最大数目

定长子串中元音的最大数目

题目链接 定长子串中元音的最大数目 题目描述 注意点 s 由小写英文字母组成返回字符串 s 中长度为 k 的单个子字符串中可能包含的最大元音字母数1 < k < s.length 解答思路 根据滑动窗口的思想&#xff0c;维持一个大小为k的窗口&#xff0c;每次移动窗口时整体向右…
阅读更多...
【ROS2笔记三】构建ROS2功能包

【ROS2笔记三】构建ROS2功能包

3.构建ROS2功能包 文章目录 3.构建ROS2功能包3.1ROS2中包的组成部分3.2创建ROS2功能包并编写节点3.2.1使用CMake创建功能包3.2.2编写cpp节点代码 3.3编译运行节点3.4使用面向对象的方式编写ROS2节点3.5使用RCLPY编写节点Reference 3.1ROS2中包的组成部分 ROS2可以使用CMake或者…
阅读更多...
用于显著提高检索速度和降低成本的二进制和标量嵌入量化

用于显著提高检索速度和降低成本的二进制和标量嵌入量化

我们引入了嵌入量化的概念&#xff0c;并展示了它们对检索速度、内存使用、磁盘空间和成本的影响。我们将讨论理论上和实践中如何对嵌入进行量化&#xff0c;然后介绍一个 演示&#xff0c;展示了 4100 万维基百科文本的真实检索场景。 演示地址https://hf.co/spaces/sentence-…
阅读更多...
C语言——贪吃蛇小游戏

C语言——贪吃蛇小游戏

目录 前言 一、贪吃蛇游戏 1.1 游戏背景 1.2 游戏功能 1.3 技术要点 二、Win32 API 2.1 控制台程序 2.2 控制台屏幕上的坐标COORD 2.3 GetStdHandle 2.4 GetConsoleCursorInfo 2.4 CONSOLE_CURSOR_INFO 2.5 SetConsoleCursorInfo 2.6 SetConsoleCursorPosition …
阅读更多...
第十届蓝桥杯省赛真题（C/C++大学B组）

第十届蓝桥杯省赛真题（C/C++大学B组）

试题 A: 组队 答案&#xff1a;490 试题 B: 年号字串 #include <bits/stdc.h> using namespace std;int main() {//26进制数 int n;cin>>n;string s "111";for(int i s.length() - 1;i >0;i--){s[i] A - 1 n % 26;n / 26;}cout<<s<<…
阅读更多...
交换机与路由器缓冲区：寻找完美大小

交换机与路由器缓冲区：寻找完美大小

*本文系SDNLAB编译自瞻博网络技术专家兼高级工程总监Sharada Yeluri领英 在路由器和交换机中&#xff0c;缓冲区至关重要&#xff0c;可以防止网络拥塞期间的数据丢失。缓冲区到底要多大&#xff1f;这个问题在学术界和工业界一直备受争议。本文探讨了高端路由器中数据包缓冲的…
阅读更多...
Matlab 实时读取串口并绘图

Matlab 实时读取串口并绘图

Matlab 实时读取串口并绘图 Vofa Vofa 是一个很好的跨平台上位机软件&#xff0c;但是它无法保存数据&#xff0c;而且作者也并没有要继续更新的意思&#xff0c;保存数据功能应该是遥遥无期了。因此本文使用 Matlab 实时读取串口数据&#xff0c;并使用 plot 函数绘制。 vo…
阅读更多...
性能分析-nginx（tomcat、nginx【配置】、负载均衡）

性能分析-nginx（tomcat、nginx【配置】、负载均衡）

tomcat 像kyj项目请求直接对接 tomcat&#xff0c;tomcat的连接池就会直接影响“并发用户数” 如果这种情况下做性能测试的时候&#xff0c;并发用户数不能满足要求&#xff0c;可以适当加大线程池的配置。 如&#xff1a;项目性能测试发现项目所在机器&#xff0c;资源利用率…
阅读更多...
hexo接入github Discussions评论系统

hexo接入github Discussions评论系统

评论存储仓 可以是你的博客项目的(github)仓库&#xff0c;也可以单独新建一个评论存储仓库。 我的博客项目在gitee上&#xff0c;就以新建存储仓为例&#xff1a; 使用Discussions评论系统必须开通Discussions模块&#xff01; 安装giscus插件 https://github.com/apps/…
阅读更多...
书客、月影、欧普护眼大路灯哪款好？三款落地灯真实对比测评

书客、月影、欧普护眼大路灯哪款好？三款落地灯真实对比测评

作为在照明电器领域资深的评测员&#xff0c;我对市面上各种新颖的照明家电有着深入的探索和研究。大路灯能够提供舒适健康的照明光线&#xff0c;目前正受到许多用眼人群的广泛欢迎。&#xff0c;当然随着大路灯的普及&#xff0c;市场中也充斥着一些低劣的大路灯产品&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023