用animation动画写发光的进度条

最新推荐文章于 2023-08-31 20:08:57 发布

c99441122

最新推荐文章于 2023-08-31 20:08:57 发布

阅读量588

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：动画 animation

本文链接：https://blog.youkuaiyun.com/c99441122/article/details/56677144

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML和CSS实现的进度指示器动画效果。通过定义特定的CSS样式，包括动画和定位，创建了带有活动状态点的水平进度条。该进度条使用HTML结构元素和CSS属性来设置布局和外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bling propressingBar

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .main-body{
                width: 1000px;
                margin: 100px auto;
            }
            .progress-bar{
                height: 4px;
                background: #ccc;
            }
            .progress-bar .status-point{
                width: 20px;
                height:20px;
                border-radius: 50%;
                background: #007ed8;
                float: left;
                margin-right:140px;
                margin-top: -8px;
            }
            .progress-bar .status-point:last-child{
                float: right;
                margin-right:0;
            }
            .progress-bar .status-point.active{
                animation: bling-bling 5s infinite;
            }
            @keyframes bling-bling {
                0%{
                    box-shadow: 0 0 0 #005b96;
                }
                50%{
                    box-shadow: 0 0 20px #005b96;
                }
                100%{
                    box-shadow: 0 0 0 #005b96;
                }
            }
        </style>
    </head>
    <body>
    <div class="main-body">
        <div class="progress-bar">
            <span class="status-point"></span>
            <span class="status-point"></span>
            <span class="status-point"></span>
            <span class="status-point"></span>
            <span class="status-point active"></span>
            <span class="status-point"></span>
            <span class="status-point"></span>
        </div>
    </div>
    </body>
    </html>