CSS画圆以及CSS实现动态圆

1. 先看基础（静态圆）
- 1.1 效果如下：
- 1.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>Documenttitle>
    <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">10i>
    div>

    <div class="xmbook_red_point_5">12div>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

相关阅读:
数字电路与逻辑设计之组合逻辑电路
 我开始使用了Typescript
steam搬砖项目2023年现状分析，到底还能不能做？
java计算机毕业设计远程教学系统录屏源程序+mysql+系统+lw文档+远程调试
 BSV 中的零开销私人时间戳
 静态HTML旅行主题网页设计与实现——联途旅游网服务平台网(39页)HTML+CSS+JavaScript
js之加减乘除精度问题
 【计算机网络】第五章传输层
 源码解析flink文件连接源TextInputFormat
静态ip详解
原文地址：https://blog.csdn.net/suixinfeixiangfei/article/details/134216296