css3做渐变进度条

最新推荐文章于 2024-04-03 22:15:49 发布

huxiaoxiao.

最新推荐文章于 2024-04-03 22:15:49 发布

阅读量347

点赞数

分类专栏： css 文章标签： css3 前端

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121547558

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

布局：

<body>
    <section class="container">
        <div class="loading-bar">
            
        </div>
    </section>
    <h1>css3渐变进度条</h1>
</body>

样式部分：

<style>
        body{
            background-color: #333;
            animation: body-animate 5s linear infinite;
            display: block;
            margin: 8px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 50%;
            background-color: #fff;
            margin: 280px auto 100px;
            padding: 20px 40px ;
            border-radius: 4px;
            box-shadow: 0 10px 20px rgb(0, 0, 0 /50%);
            
        }
        .container .loading-bar{
            display: inline-block;
            width: 100%;
            height: 10px;
            background-color: #f1f1f1;
            box-shadow: inset 0 0 5px rgb(0,0,0 /20%);
            border-radius: 5px;
            overflow: hidden;
            position: relative;

        }
        .container .loading-bar:hover{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgb(0,0,0 /20%);
            animation: load-animate 5s linear infinite;
        }
        @keyframes load-animate{
            0%{
                width: 0%;
                background-color: #ff6369;
            }
            70%{
                width: 70%;
                background-color: #ffe669;
            }
            100%{
                width: 100%;
                background-color: #d6e663;
            }
        }
        @keyframes body-animate{
            0%{
                background-color: #ff6369;
            }
            70%{
                background-color: #ffe669;
            }
            100%{
                background-color: #d6e663;
            }
        }
        .container .loading-bar:after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgb(0,0,0 /20%);
            animation: load-animate 5s linear infinite;
        }
        section{
                display: block;
            }
            body h1{
                width: 100%;
                text-align: center;
                color: #fff;
                text-transform: uppercase;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 3em;
                letter-spacing: 3px;

            }
            h1{
                display: block;
                font-size: 2em;
                margin-block-start: 0.67em;
                margin-block-end: 0.67em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
                font-weight: bold;
            }
    </style>

查看效果：

huxiaoxiao.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3做渐变进度条

布局：<body> <section class="container"> <div class="loading-bar"> </div> </section> <h1>css3渐变进度条</h1></body>样式部分：<style> body{ backgr
复制链接

扫一扫