• CSS-线性渐变无畸变-环形普通进度条-环形能量块进度条-局部环形普通进度条

    CSS-线性渐变无畸变-环形普通进度条-环形能量块进度条-局部环形普通进度条

    1.线性渐变(无畸变)

    实现思路：

    • 假设基准长度为600px，渐变起始点：rgb(0, 115, 203,1),rgb(0, 115, 203,0)；
    • 则50%长度300px，渐变结束点：rgb(0, 115, 203,0.5)；（1 - 300 / 600)；
    • 则25%长度150px，渐变结束点：rgb(0, 115, 203,0.75)；(1 - 150 / 600)；
    • 综上所述：渐变结束点透明度计算公式：rgba—>a = 1 - 长度 / 基准长度。

    代码如下：

            <h1>1.线性渐变(无畸变)h1>
        <div class="gradient-div">
            <div class="base-div">基准长度渐变div>
            <div class="half-div">一半长度渐变div>
            <div class="quarter-div">四分之一长度渐变div>
        div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    	    .gradient-div{
	         width: 100%;
	         height: 100px;
	         font-size: 15px;
	         color:white;
	         display: flex;
	         flex-direction: column;
	         align-items: flex-start;
	         justify-content: center;
	     }
	     .base-div{
	         width:600px;
	         height:30px;
	         box-sizing: border-box;
	         background-image: linear-gradient(to right,rgb(0, 115, 203,1),rgb(0, 115, 203,0));
	     }
	     .half-div{
	         width:300px;
	         height:30px;
	         box-sizing: border-box;
	         background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.5));
	     }
	     .quarter-div{
	         width:150px;
	         height:30px;
	         box-sizing: border-box;
	         background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.75));
	     }

    • 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

    2.线性能量条-进度条

    实现思路：

    • 需要一个外部div和并在其中再编写一个内部div；
    • 外部idv充当背景滑轨；
    • 内部div使用设定背景宽高的间隔重复渐变，即是能量块式进度条；
    • 控制内部div的长度即可控制“进度”。

    代码如下：

            <h1>2.线性能量条-进度条h1>
        <div class="outside-div">
            <div class="inside-div">div>
        div>

    • 1
    • 2
    • 3
    • 4
            .outside-div{
            width: 600px;
            height: 30px;
            box-sizing: border-box;
            background-color: rgb(211, 246, 246);
            border-radius: 15px;

            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }
        .inside-div{
            width: 400px;
            height: 30px;
            margin-top: 6px;
            margin-bottom: 6px;
            margin-left: 15px;
            margin-right: 25px;
            box-sizing: border-box;
            
            background-image: linear-gradient(to right,rgb(51, 89, 227) 12px,rgb(211, 246, 246) 4px);
            background-repeat: repeat;
            background-size: 16px 100%;
        }

    • 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

    3.环形普通-进度条

    实现思路：

    • 需要一个外部div和一个内部div，且内部div比外部小充当遮罩；
    • 外部div使用conic-gradient，渐变颜色只有两种：一是进度色，二是底色；
    • 内部div使用白色进行遮罩，形成环形；
    • 控制外部div进度色的结束角度即可控制“进度”。

    代码如下：

            <h1>3.环形普通-进度条h1>
        <div class="progress-div">
            <div class="insidemask-div">40%div>
        div>

    • 1
    • 2
    • 3
    • 4
            .progress-div{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgb(211, 246, 246);

            border-radius: 150px;

            background:conic-gradient(from  180deg, red 0deg, red 150deg,rgb(211, 246, 246) 0deg);
        }
        .insidemask-div{
            width: 280px;
            height: 280px;
            box-sizing: border-box;

            border-radius: 140px;
            background-color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: bold;;
        }

    • 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

    4.环形能量条-进度条

    实现思路：

    • 需要一个外部div和一个内部div，且内部div比外部小充当遮罩；
    • 外部div使用conic-gradient，渐变颜色只有两种：一是能量块色，二是间隔色块，两种颜色的为一组基本单位。
    • 内部div使用白色进行遮罩，形成环形；
    • 控制外部div的“组”的个数即可控制“进度”，通过js的模板字符串循环构造组的个数，使用DOM操作设置conic-gradient其参数即可。

    代码如下：

            <h1>4.环形能量条-进度条h1>
        <div class="split-progress-div">
            <div class="split-insidemask-div">div>
        div>

    • 1
    • 2
    • 3
    • 4
            .split-progress-div{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            border-radius: 150px;
        }
        .split-insidemask-div{
            width: 280px;
            height: 280px;

            border-radius: 150px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: bold;;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
            const circleEngry = function(num){
            let splitString = "white 0 360deg";
            if(num >= 1){
                let anum = 10;

                const toab = function(anum){
                    return [`#80FFFF ${anum - 10}deg,#80FFFF ${anum - 5}deg`,`,white ${anum - 5}deg,white ${anum}deg`];
                };
                
                splitString = "";
                for(let i = 0;i < num;i++){
                    if(i != 0){
                        splitString = splitString + "," + toab(anum)[0] + toab(anum)[1];
                    }
                    else{
                        splitString = toab(anum)[0] + toab(anum)[1];
                    }
                    
                    anum = anum + 10;

                }
            }

            //console.log(splitString);
            let splitProgressDiv = document.getElementsByClassName('split-progress-div');
            let splitInsidemaskDiv = document.getElementsByClassName('split-insidemask-div');
            splitProgressDiv[0].style = `background:conic-gradient(${splitString}); `;
            splitInsidemaskDiv[0].innerHTML = (num / 36 * 100).toFixed(2) + "%";
        }

    • 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

    5.局部环形普通-进度条

    实现思路：

    • 需要一个外部div和一个内部div，且内部div比外部小充当遮罩；
    • 外部div使用conic-gradient，渐变颜色只有两种：一是进度色，二是底色，设置渐变起始角度为某值，底色的结束角度位置与前述起始角度位置对称，剩余角度直到360°都设置为white；
    • 内部div使用白色进行遮罩，形成环形；
    • 控制外部div进度色的结束角度即可控制“进度”。

    代码如下：

            <h1>5.局部环形普通-进度条h1>
        <div class="sub-progress-div">
            <div class="sub-insidemask-div">div>
        div>

    • 1
    • 2
    • 3
    • 4
            .sub-progress-div{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background:conic-gradient(from  210deg, blue 0deg, blue 100deg,rgb(211, 246, 246) 100deg,rgb(211, 246, 246) 300deg,white 300deg);
            border-radius: 150px;
        }
        .sub-insidemask-div{
            width: 280px;
            height: 280px;

            border-radius: 150px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: bold;;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    6.完整HTML文件代码

    DOCTYPE html>
<html lang="zh">
    <head>
        
        <style>
            .gradient-div{
                width: 100%;
                height: 100px;

                font-size: 15px;
                color:white;

                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
            }
            .base-div{
                width:600px;
                height:30px;
                box-sizing: border-box;
                background-image: linear-gradient(to right,rgb(0, 115, 203,1),rgb(0, 115, 203,0));
            }
            .half-div{
                width:300px;
                height:30px;
                box-sizing: border-box;
                background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.5));
            }
            .quarter-div{
                width:150px;
                height:30px;
                box-sizing: border-box;
                background-image: linear-gradient(to right,rgb(0, 115, 203),rgb(0, 115, 203,0.75));
            }

            .outside-div{
                width: 600px;
                height: 30px;
                box-sizing: border-box;
                background-color: rgb(211, 246, 246);
                border-radius: 15px;

                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
            }
            .inside-div{
                width: 400px;
                height: 30px;
                margin-top: 6px;
                margin-bottom: 6px;
                margin-left: 15px;
                margin-right: 25px;
                box-sizing: border-box;
                
                background-image: linear-gradient(to right,rgb(51, 89, 227) 12px,rgb(211, 246, 246) 4px);
                background-repeat: repeat;
                background-size: 16px 100%;

            }

            .progress-div{
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: rgb(211, 246, 246);

                border-radius: 150px;

                background:conic-gradient(from  180deg, red 0deg, red 150deg,rgb(211, 246, 246) 0deg);
            }
            .insidemask-div{
                width: 280px;
                height: 280px;
                box-sizing: border-box;

                border-radius: 140px;
                background-color: white;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: bold;;
            }

            .split-progress-div{
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                border-radius: 150px;
            }
            .split-insidemask-div{
                width: 280px;
                height: 280px;

                border-radius: 150px;
                background-color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: bold;;
            }
            .sub-progress-div{
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background:conic-gradient(from  210deg, blue 0deg, blue 100deg,rgb(211, 246, 246) 100deg,rgb(211, 246, 246) 300deg,white 300deg);
                border-radius: 150px;
            }
            .sub-insidemask-div{
                width: 280px;
                height: 280px;

                border-radius: 150px;
                background-color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: bold;;
            }
        style>
    head>
    <body>
        <h1>1.线性渐变(无畸变)h1>
        <div class="gradient-div">
            <div class="base-div">基准长度渐变div>
            <div class="half-div">一半长度渐变div>
            <div class="quarter-div">四分之一长度渐变div>
        div>
        <h1>2.线性能量条-进度条h1>
        <div class="outside-div">
            <div class="inside-div">div>
        div>
        <h1>3.环形普通-进度条h1>
        <div class="progress-div">
            <div class="insidemask-div">40%div>
        div>
        <h1>4.环形能量条-进度条h1>
        <div class="split-progress-div">
            <div class="split-insidemask-div">div>
        div>
        <h1>5.局部环形普通-进度条h1>
        <div class="sub-progress-div">
            <div class="sub-insidemask-div">div>
        div>
        <script>
            const circleEngry = function(num){
                let splitString = "white 0 360deg";
                if(num >= 1){
                    let anum = 10;

                    const toab = function(anum){
                        return [`#80FFFF ${anum - 10}deg,#80FFFF ${anum - 5}deg`,`,white ${anum - 5}deg,white ${anum}deg`];
                    };
                    
                    splitString = "";
                    for(let i = 0;i < num;i++){
                        if(i != 0){
                            splitString = splitString + "," + toab(anum)[0] + toab(anum)[1];
                        }
                        else{
                            splitString = toab(anum)[0] + toab(anum)[1];
                        }
                        
                        anum = anum + 10;

                    }
                }

                //console.log(splitString);
                let splitProgressDiv = document.getElementsByClassName('split-progress-div');
                let splitInsidemaskDiv = document.getElementsByClassName('split-insidemask-div');
                splitProgressDiv[0].style = `background:conic-gradient(${splitString}); `;
                splitInsidemaskDiv[0].innerHTML = (num / 36 * 100).toFixed(2) + "%";
            };
            circleEngry(14);
        script>
    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
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200

    7.CSS运行效果

    在这里插入图片描述

  • 相关阅读:
    PCA和SVD数据降维
    如何使用Jekyll在GitHub Pages上搭建网站（个人博客）
    《工程伦理与学术道德》之《工程与伦理》
    基于VectorGrid加载GeoServer发布的矢量瓦片实例
    什么是DNS劫持？如何进行有效应对？
    【数据结构】队列的基本操作——基本实现 | 初始化 | 出入队列
    图解LeetCode——793. 阶乘函数后 K 个零（难度：困难）
    laravel5.1反序列化
    最大路径和问题（摘樱桃问题）
    自制操作系统日志——第二十九、三十天
  • 原文地址：https://blog.csdn.net/weixin_54698498/article/details/126237767