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

置顶

Absolute小白

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

阅读量2.4k

点赞数 4

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

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

本文链接：https://blog.youkuaiyun.com/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 = optio