效果如下
代码 里面有关键点的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #000;
}
h1 {
/* 定义一个css变量 */
--progress: 0;
color: transparent;
margin: 0 auto;
width: 50%;
/* color: #fff; */
font-size: 60px;
font-family: Helvetica, sans-serif;
letter-spacing: -3px;
/* 设置背景渐变是是用background-image的属性 不是background-color 也可以直接简写成background */
/* 用calc去计算为0的值 通过var去获取变量的值 */
background-image: linear-gradient(
#fff calc(100% - calc(var(--progress) * 100%)),
#4cd265 calc(100% - calc(var(--progress) * 100%))
);
/* 设置背景颜色在文字上 加入-webkit解决兼容问题 */
background-clip: text;
-webkit-background-clip: text;
/* clamp属性有三个值 第一个是最小 第三个是最大 第二个是判断 假如小于第一就采用第一个值 反之采用第三个 不大不小采用它自己 */
/* 使用calc计算progress 小于1的时候为负数 等于一的时候为正数且大于1.3 */
transform: scale(clamp(1, calc((var(--progress) - 0.99) * 200), 1.3));
/* 加入过渡效果 */
transition: 0.3s transform ease-out;
}
.button {
position: absolute;
bottom: 0;
padding: 20px;
}
.button button {
display: inline-block;
font-size: 32px;
background-color: #fff;
padding: 10px 20px;
border-radius: 12px;
margin: 0 10px;
}
</style>
</head>
<body>
<h1>Up to 20 hours of battery life — the longest in any Mac ever .</h1>
<div class="button">
<button id="empty">0%</button>
<button id="full">100%</button>
</div>
<script>
let progress = 0
function run() {
if (progress < 1) {
progress = parseFloat((progress + 0.01).toFixed(2))
// 通过setProperty 将 progress设置到css的变量里面
document.querySelector('h1').style.setProperty('--progress', progress)
setTimeout(run, 20)
}
}
document.querySelector('#empty').addEventListener('click', (e) => {
progress = 0
document.querySelector('h1').style.setProperty('--progress', progress)
})
document.querySelector('#full').addEventListener('click', (e) => {
run()
})
</script>
</body>
</html>