当前位置：首页 > news >正文

CSS画圆以及CSS实现动态圆

news 2026/1/10 7:29:57

CSS画圆以及CSS实现动态圆

1. 先看基础（静态圆）
- 1.1 效果如下：
- 1.2 代码如下：
2. 动态圆
- 2.1 一个动态圆
- - 2.1.1 让圆渐变
  - 2.1.2 圆渐变8秒后消失
  - 2.1.3 转动的圆（单个圆）
- 2.2 多个动态圆

1. 先看基础（静态圆）

1.1 效果如下：

如下：

1.2 代码如下：

如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 正方形 */.xmbook_red_point_1 {width: 50px;height: 50px;display: inline-block;background-color: red;}/* 圆角正方形 */.xmbook_red_point_2 {width: 50px;height: 50px;display: inline-block;background-color: red;border-radius: 20%;}/* 实心圆 */.xmbook_red_point_3 {width: 50px;height: 50px;/* position: relative; *//* bottom: 2px; *//* left: 4px; */display: inline-block;/* background: url(/zh_CN/htmledition/images/icon_xmbook_red_point513f4c.png); */background-color: red;border-radius: 50%;}/* 空心圆 */.xmbook_red_point_4 {width: 50px;height: 50px;display: inline-block;/* background-color: red; */border-radius: 50%;border: 2px solid;border-color: red;}/* 圈中带字 */.xmbook_red_point_5 {width: 50px;height: 50px;display: inline-block;/* background-color: red; */border-radius: 50%;border: 2px solid;border-color: red;/* 设置圈中字体大小等 */font: 14px Arial, sans-serif;/* 下面是调整圈中字体位置的 */display: flex;justify-content: center;align-items: center;/* text-align: center; */}</style>
</head>
<body><div class="xmbook_red_point_1"></div><div class="xmbook_red_point_2"></div><div><i class="xmbook_red_point_3"></i></div><div><i class="xmbook_red_point_4"></i></div><!-- 圈中带字 --><div><i class="xmbook_red_point_5">10</i></div><div class="xmbook_red_point_5">12</div></body>
</html>

2. 动态圆

2.1 一个动态圆

2.1.1 让圆渐变

效果如下：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;/* display: inline-block; *//* background-color: red; */border-radius: 50%;/* border: 2px solid; *//* border-color: red; */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 3s infinite linear;transform-origin: 150px 150px ;}@keyframes identifier{   /*用“0%-100%” 或者 “from-to” 均可以*/  from{transform: rotate(360deg) scale(1);border: 10px solid rgb(143, 182, 222);}to{transform: rotate(360deg) scale(1);border: 10px solid rgb(2, 36, 70);}}</style>
</head>
<body><div class="xmbook_red_point_4"></div></body>
</html>

2.1.2 圆渐变8秒后消失

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;/* background-color: red; */border-radius: 50%;/* border-color: red; */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 8s infinite linear;/* transform-origin: 150px 150px ; */}@keyframes identifier {100% {/* transform: rotate(360deg) scale(1); */border: 10px solid rgb(6, 68, 130);}}</style>
</head>
<body><div class="xmbook_red_point_4"></div></body>
</html>

2.1.3 转动的圆（单个圆）

实现效果如下：

css实现圆转动（单个圆）

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;background-color: red;border-radius: 50%;/* border-color: rgb(0, 98, 255); */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 5s infinite linear;transform-origin: 150px 150px ;}@keyframes identifier {100% {transform: rotate(360deg) scale(1);/* border: 10px solid rgb(6, 68, 130); */}}</style>
</head>
<body><div class="xmbook_red_point_4"></div></body>
</html>

2.2 多个动态圆

实现效果如下：

css实现多个运动的圆

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;background-color: rgb(9, 163, 30);border-radius: 50%;/* border-color: rgb(0, 98, 255); */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 5s infinite linear;transform-origin: 100px 100px ;}/* 如果让三圆重叠，把下面的 120px 调成 100px 或更小即可 */.xmbook_red_point_4:nth-child(1) {animation: identifier 9s infinite linear;transform-origin: 120px 120px;}.xmbook_red_point_4:nth-child(2) {animation: identifier 9s infinite -3s linear;transform-origin: 120px 120px;}.xmbook_red_point_4:nth-child(3) {animation: identifier 9s infinite -6s linear;transform-origin: 120px 120px;}@keyframes identifier {0% {transform: rotate(0deg) scale(1);border: 10px solid rgb(4, 212, 195);}30% {transform: rotate(120deg) scale(1);border: 10px solid rgb(33, 4, 147);}100% {transform: rotate(360deg) scale(1);border: 10px solid rgb(132, 7, 9);}}</style>
</head>
<body><div class="xmbook_red_point_4"></div><div class="xmbook_red_point_4"></div><div class="xmbook_red_point_4"></div>
</body>
</html>

CSS画圆以及CSS实现动态圆

CSS画圆以及CSS实现动态圆 1. 先看基础（静态圆）1.1 效果如下：1.2 代码如下： 2. 动态圆2.1 一个动态圆2.1.1 让圆渐变2.1.2 圆渐变8秒后消失2.1.3 转动的圆（单个圆） 2.2 多个动态圆 1. 先看基础（…...

编程日记 2023/11/5 20:52:03

K8S知识点（一）

（1）应用部署方式转变 （2）K8S介绍容器部署容易出现编排问题，为了解决就出现了大量的编排软件，这里将的是K8S编排问题的解决佼佼者弹性伸缩：当流量从1000变为1200可以，自动开启一个…...

编程日记 2023/11/5 20:50:00

人工智能师求职面试笔试题及答案汇总

人工智能师求职面试笔试题及答案汇总 1.如何在Python中实现一个生成器？ 答：在Python中，生成器是一种特殊类型的迭代器。生成器允许你在需要时才生成值，从而节省内存。生成器函数在Python中是通过关键字yield来实现的。例如&…...

编程日记 2023/11/5 20:48:59

【Windows-软件-FFmpeg】（01）通过CMD运行FFmpeg进行操作，快速上手

前言通过"cmd"运行"ffmpeg"进行操作，快速上手； 实操【实操一】说明使用"ffmpeg"来合并音频文件和视频文件 ； 环境 Windows 11 专业版（22621.2428）； 代码 &#xf…...

编程日记 2023/11/5 20:47:58

Spring Data Redis + RabbitMQ - 基于 string 实现缓存、计数功能（同步数据）

目录一、Spring Data Redis 1.1、缓存功能 1.1.1、分析 1.1.2、案例实现 1.1.3、效果演示 1.2、计数功能（Redis RabbitMQ） 1.2.1、分析 1.2.2、案例实现一、Spring Data Redis 1.1、缓存功能 1.1.1、分析使用 redis 作为缓存， M…...

编程日记 2023/11/5 20:46:56

Facebook Developer 的 HashCode

在 Android 中，您可以使用 Facebook SDK 提供的工具来生成您的应用程序的哈希码（hash code），以便在 Facebook 开发者帐户中配置您的应用程序。要生成哈希码，您可以使用以下步骤： 打开终端或命令提示符&am…...

编程日记 2023/11/5 20:45:55

文章目录 npm 版本问题在idea终端输入命令报错：error:0308010C:digital envelope routines::unsupported npm 版本问题 npm v9.6.3 is known not to run on Node.js v19.9.0. This version of npm supports the following node versions: ^14.17.0 || ^16.13.0 || …...

编程日记 2023/11/5 20:44:54

「Java开发指南」如何用MyEclipse搭建Spring MVC应用程序？（一）

本教程将指导开发者如何生成一个可运行的Spring MVC客户应用程序，该应用程序实现域模型的CRUD应用程序模式。在本教程中，您将学习如何： 从数据库表的Scaffold到现有项目部署搭建的应用程序使用Spring MVC搭建需要MyEclipse Spring或Bling授…...

编程日记 2023/11/5 20:43:52

[动态规划] (七) 路径问题：LCR 166.剑指offer 47. 珠宝的最高价值

[动态规划] (七) 路径问题：LCR 166./剑指offer 47. 珠宝的最高价值文章目录 [动态规划] (七) 路径问题：LCR 166./剑指offer 47. 珠宝的最高价值题目解析解题思路状态表示状态转移方程初始化和填表顺序返回值代码实现总结 LCR 166. 珠宝的最高价值题目…...

编程日记 2023/11/5 20:42:50

Mysql进阶-SQL优化篇

插入数据 insert 我们需要一次性往数据库表中插入多条记录，可以从以下三个方面进行优化。批量插入数据一条insert语句插入多个数据，但要注意，每个insert语句最好插入500-1000行数据，就得重新写另一条insert语句 Insert into…...

编程日记 2023/11/5 20:41:49

VueI18n中英文切换 vue2.0

1: npm install --save vue-i18n8.0.0 （版本不要高了，不然报错） 2：创建相关文件 3：main.js文件配置 //i18n插件 import VueI18n from vue-i18n // element-ui多语言文件 import locale from element-ui/lib/locale;…...

编程日记 2023/11/5 20:40:48

VUE组件间通信的七种方式

目录 1、 props / $emit （1）父组件向子组件传值（props的用法） （2）子组件向父组件传递数据（$emit的用法） 2、ref / $refs 用法： 3、eventBus事件总线（$e…...

编程日记 2023/11/5 20:39:46

问chatgpt最近生活的困难

你知道吗，因为我做的所有的事情没有任何目的性，所以曾经过的很好，这种很好是一种逃避式的好，怎么说呢？遇到困难了，那就不做了，换下一个项目。比如打游戏，如果我这局玩王者荣耀&#…...

编程日记 2023/11/5 20:38:44

Flink源码解析八之任务调度和负载均衡

源码概览 jobmanager scheduler：这部分与 Flink 的任务调度有关。 CoLocationConstraint：这是一个约束类，用于确保某些算子的不同子任务在同一个 TaskManager 上运行。这通常用于状态共享或算子链的情况。CoLocationGroup & CoLocationGroupImpl：这些与 CoLocationCon…...

编程日记 2023/11/5 20:37:42

4.3 传送门

算法设计与分析 4.3 传送门题目描述现在有 n 个传送门，你处在第一个传送门的位置，第 i 个传送门可以将你传送到第 i-a[i] 到第 ia[i] 范围内的任意一个传送门，请问你最少需要几次操作，使得你可以传送到最后一个传送门的位置。 …...

编程日记 2023/11/5 20:36:40

NLP之Bert介绍和简单示例

文章目录 1. Bert 介绍2. 代码示例2.1 代码流程 1. Bert 介绍 2. 代码示例 from transformers import AutoTokenizertokenizer AutoTokenizer.from_pretrained("bert-base-chinese") input_ids tokenizer.encode(欢迎来到Bert世界, return_tensorstf) print(input…...

编程日记 2023/11/5 20:34:38

【Windows】Google和火狐浏览器禁用更新的操作方式

想必很多网民常用的浏览器是Edge，Google，火狐这三种，但是浏览器都有后台自动更新，更新提示会一直显示，要用户去点击才关掉，有点强迫症的用户就会想要把它一直关掉，可每次打开都关不掉&#xff0…...

编程日记 2023/11/5 20:33:35

关于编程不得不说的事

这些年，互联网爆炸式的发展，促生了无数程序员，也促生了大量 IT培训机构。短短数年间，科班出生的程序员和培训机构出生的程序员呈指数增长。程序员的职业也不再是金饭碗。写了这么多代码，有些感触，所以写下来…...

编程日记 2023/11/5 20:32:34

2.4G合封芯片 XL2422，集成M0核MCU，高性能低功耗

XL2422芯片是一款高性能低功耗的SOC集成无线收发芯片，集成M0核MCU，工作在2.400~2.483GHz世界通用ISM频段。该芯片集成了射频接收器、射频发射器、频率综合器、GFSK调制器、GFSK解调器等功能模块，并且支持一对多线网和带ACK的通信模式。发射输…...

编程日记 2023/11/5 20:31:33

【QT基础入门控件篇】QLineEdit 基础、高级和样式表使用详解

一、QLineEdit简介 QLineEdit是一个单行文本编辑器，它可以让用户输入和编辑纯文本，也可以设置一些有用的编辑功能，如撤销和重做、剪切和粘贴、拖放等。QLineEdit: 可以根据不同的回显模式（echoMode）来显示不同的输入内…...

编程日记 2023/11/5 20:30:31

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2026/1/8 15:18:51

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...

编程新知 2026/1/8 15:25:52

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/1/5 8:29:01

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2026/1/3 20:28:18

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系坐标体系-介绍坐标原点位于左上角，以像素为单位。在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

日常一水C

多态言简意赅：就是一个对象面对同一事件时做出的不同反应而之前的继承中说过，当子类和父类的函数名相同时，会隐藏父类的同名函数转而调用子类的同名函数，如果要调用父类的同名函数，那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...

编程新知 2026/1/10 5:23:22

React核心概念：State是什么？如何用useState管理组件自己的数据？

系列回顾： 在上一篇《React入门第一步》中，我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目，并修改了App.jsx组件，让页面显示出我们想要的文字。但是，那个页面是“死”的，它只是静态…...

编程新知 2025/11/3 8:29:51

CSS画圆以及CSS实现动态圆

1. 先看基础（静态圆）

1.1 效果如下：

1.2 代码如下：

2. 动态圆

2.1 一个动态圆

2.1.1 让圆渐变

2.1.2 圆渐变8秒后消失

2.1.3 转动的圆（单个圆）

2.2 多个动态圆

相关文章：