进度条动画，背景颜色渐变

最新推荐文章于 2023-08-29 07:31:47 发布

*杰

最新推荐文章于 2023-08-29 07:31:47 发布

阅读量1.1k

点赞数

分类专栏：专题

本文链接：https://blog.csdn.net/qq_42483491/article/details/89000764

版权

专题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

//样式
<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
          background-color:antiquewhite;
        }
        .bigBox {
	        width: 600px;
	        height: 300px;
	        padding: 50px;
	        margin: 0px auto;
	        border-radius: 10px;
	        background: rgba(255,255,255,0.6);/*渐变*/
	        border: 1px solid #eee;
        }
        .bigBox .testone {
	        margin-bottom: 40px;
        }
        .testone {
	        width: 500px;
	        margin: 0px auto;
	        height: 61px;
	        border-radius: 5px;
	        background-color: #282f32;
	        padding: 4px 5px;
	        box-shadow: inset 3px 0px 10px rgba(0,0,0,0.1);
        }
        .colour {
	        height: 60px;
	        border-radius: 5px;
	        white-space: nowrap;
	        overflow: hidden;
	        margin-top: -9px;
        }
        .undernerth {
            width: 200%;
            background: url('../../Content/image/lines.svg') repeat-x;
            height: 120%;
            text-align: center;
            margin-top: -35px;
            overflow: hidden;
            border-radius: 50px;
            -webkit-animation: moveBars 1s linear infinite;
            -moz-animation: moveBars 1s linear infinite;
            -o-animation: moveBars 1s linear infinite;
            animation: moveBars 1s linear infinite;
            font-weight: bold;
            color: #fff;
            font-size: 18px;
            text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
        }
        .intnumber {
	        text-align: center;
	        font-family: '华文行楷', sans-serif;
	        font-weight: bold;
	        position: relative;
	        top: 9px;
	        font-size: 30px;
	        text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	        color: #fff;
	        z-index: 9999;
        }
        .green {
	        background-color: #8ac320;
	        box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #79aa1e , 0 7px 0 #628c14;
        }
        .blue {
	        background-color: #20b9c3;
	        box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #1e8aaa, 0 7px 0 #13768c;
        }
        .red {
	        background-color: #dc6565;
	        box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #d23333, 0 7px 0 #8c1212;
        }
        @@-webkit-keyframes moveBars { 100% { margin-left: -180px; } }/*webkit浏览器*//*也支持谷歌*/
        @@-moz-keyframes moveBars { 100% { margin-left: -180px; } }/*火狐*/
        @@-ms-keyframes moveBars { 100% { margin-left: -180px; } }/*IE*/
</style>
//进度条盒子
<body>
<div class="bigBox">
        <div class="testone">
            <div class="colour green" style="width: 40%;">
                <div class="intnumber">
                    40%
                </div>
                <div class="undernerth"></div>
            </div>
        </div>
        <div class="testone">
            <div class="colour blue" style="width: 60%">
                <div class="intnumber">
                    60%
                </div>
                <div class="undernerth"></div>
            </div>
        </div>
        <div class="testone">
            <div class="colour red" style="width: 80%">
                <div class="intnumber">
                    80%
                </div>
                <div class="undernerth"></div>
            </div>
        </div>
    </div>
</body>

效果图显示：
在这里插入图片描述

*杰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条动画，背景颜色渐变

//样式<style> *{ margin: 0; padding: 0; } body{ background-color:antiquewhite; } .bigBox { width: 600px; ...
复制链接

扫一扫