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>