【前端html+css3+js】实现背景文字渐变色以及js实现数字递增

置顶 Absolute小白

已于 2022-12-15 11:22:25 修改

阅读量2.1k

点赞数 3

文章标签： 1024程序员节前端 javascript html css3

于 2022-10-24 17:44:32 首次发布

本文链接：https://blog.csdn.net/qq_46057971/article/details/127497086

版权

1.实现文字渐变色

<style>
.text{
 background-image: -webkit-linear-gradient(bottom, rgb(7, 33, 119), rgb(151, 178, 252), rgb(0, 217, 255));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
}
</style>

2.实现圆以及边框渐变色

 <style>
        .circle {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 50%;
        }

        .content {
            width: 210px;
            height: 210px;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 50%;
//边框色
            background-image: -webkit-linear-gradient(left, rgb(9, 64, 245) 0%, rgb(17, 75, 235) 30%, rgb(52, 134, 228) 60%, rgb(0, 217, 255) 90%);
        }

       
    </style>
<body>
<div class="content">
      <div class="circle">
</div>
</div>
</body>

3.js实现数字递增

<script>
 function NumAutoPlusAnimation(targetEle, options) {
      
        options = options || {};

        var $this = document.getElementById(targetEle),
            time = options.time || $this.data('time'), //总时间--毫秒为单位 
            finalNum = options.num || $this.data('value'),
            regulator = options.regulator || 100, 

            step = finalNum / (time / regulator),
            count = 0, //计数器 
            initial = 0;

        var timer = setInterval(function () {

            count = count + step;

            if (count >= finalNum) {
                clearInterval(timer);
                count = finalNum;
            }
            //未发生改变的话就直接返回 
        
            var t = Math.floor(count);
            if (t == initial) return;

            initial = t;

            $this.innerHTML = initial;
        }, 30);
    }
//设置数字的值以及递增总时间
    NumAutoPlusAnimation("data", {
        time: 1500,//总时间
        num: 50000,//要显示的递增值
        regulator: 50,//调速器，改变regulator的数值可以调节数字改变的速度 
    })
    NumAutoPlusAnimation("data1", {
        time: 1500,
        num: 100,
        regulator: 50
    })
    NumAutoPlusAnimation("data2", {
        time: 1500,
        num: 365,
        regulator: 50
    })
    NumAutoPlusAnimation("data3", {
        time: 1500,
        num: 8,
        regulator: 50
    })
</script>

4.全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 50%;
        }

        .content {
            width: 210px;
            height: 210px;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 50%;
            background-image: -webkit-linear-gradient(left, rgb(9, 64, 245) 0%, rgb(17, 75, 235) 30%, rgb(52, 134, 228) 60%, rgb(0, 217, 255) 90%);
        }

        .text {
            display: inline-block;
            background-image: -webkit-linear-gradient(bottom, rgb(7, 33, 119), rgb(151, 178, 252), rgb(0, 217, 255));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text1 {
            padding-top: 68px;
            padding-left: 25px;
            font-size: 42px;

        }

        .text2 {
            padding-top: 68px;
            padding-left: 24px;
            font-size: 42px;
        }

        .text3 {
            padding-top: 68px;
            padding-left: 20px;
            font-size: 42px;
        }

        .text4 {
            padding-top: 68px;
            padding-left: 25px;
            font-size: 44px;
        }
    </style>
</head>

<body>
    <div style="padding-left: 10%;">
     
        <div class="number">
            <table>
                <th>
                    <div class="content">
                        <div class="circle">
                            <div class="text1 text">
                                <span id="data">0</span>+
                            </div>
                        </div>
                </th>
                    <th>
                        <div class="content">
                            <div class="circle">
                                <div class="text2 text">
                                    <span id="data1">0</span>万+
                                </div>
                            </div>
                        </div>
                </div>
                </th>
                    <th>
                        <div class="content">
                            <div class="circle">
                                <div class="text3 text">
                                    <span id="data2">0</span>x10h
                                </div>
                            </div>
                        </div>
                </div>
                </th>
                    <th>
                        <div class="content">
                            <div class="circle">
                                <div class="text4 text">
                                    <span id="data3">0</span>年+
                                </div>
                            </div>
                        </div>
                    </th>
                </div>
            </table>

        </div>
    </div>
</body>
<script>
    function NumAutoPlusAnimation(targetEle, options) {
       
        options = options || {};

        var $this = document.getElementById(targetEle),
            time = options.time || $this.data('time'), //总时间--毫秒为单位 
            finalNum = options.num || $this.data('value'), 
            regulator = options.regulator || 100, 

            step = finalNum / (time / regulator),/*每50ms增加的数值--*/
            count = 0, //计数器 
            initial = 0;

        var timer = setInterval(function () {

            count = count + step;

            if (count >= finalNum) {
                clearInterval(timer);
                count = finalNum;
            }
            var t = Math.floor(count);
            if (t == initial) return;

            initial = t;

            $this.innerHTML = initial;
        }, 30);
    }
    NumAutoPlusAnimation("data", {
        time: 1500,//递增用的总时间
        num: 50000,//要显示的递增值
        regulator: 50,//调速器，改变regulator的数值可以调节数字改变的速度 
    })
    NumAutoPlusAnimation("data1", {
        time: 1500,
        num: 100,
        regulator: 50
    })
    NumAutoPlusAnimation("data2", {
        time: 1500,
        num: 365,
        regulator: 50
    })
    NumAutoPlusAnimation("data3", {
        time: 1500,
        num: 8,
        regulator: 50
    })

</script>

</html>