CSS画圆以及CSS实现动态圆

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 # 前端
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊