大家玩英雄联盟或者王者荣耀的时候，应该对血条不陌生吧，对血条消失术也不陌生吧？
尤其是无脑冲的小白，我是谁？我在哪？下面我们用css来一步一步实现这个效果
1.直接消失
代码很简单，过一秒宽度变成0：
<!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>
body {
padding: 200px;
background-color: rgb(156, 237, 210);
}
.wrap {
width: 300px;
height: 30px;
background-color: #000;
}
.hp {
width: 100%;
height: 100%;
background-color: rgb(221, 58, 58);
}
</style>
</head>
<body>
<div class="wrap">
<div id="hp" class="hp"></div>
</div>
<script>
setTimeout(function () {
document.getElementById('hp').style.width = 0;
}, 1000)
</script>
</body>
</html>
复制代码2.加上过渡效果
代码就加了一句：transition: width 1s
.hp {
width: 100%;
height: 100%;
transition: width 1s ease;
background-color: rgb(221, 58, 58);
}
复制代码指定过渡的速度曲线
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
ease- 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）linear- 规定从开始到结束具有相同速度的过渡效果ease-in-规定缓慢开始的过渡效果ease-out- 规定缓慢结束的过渡效果ease-in-out- 规定开始和结束较慢的过渡效果cubic-bezier(n,n,n,n)- 允许您在三次贝塞尔函数中定义自己的值
不得不说默认的效果跟预期还挺接近的，大家可以试试其他几个参数，看看都是啥效果。如果都不适合，可以试试三次贝塞尔函数，我数学没学好，就不献丑了。
3.加上延迟扣血效果
<!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>
body {
padding: 200px;
background-color: rgb(156, 237, 210);
}
.wrap {
width: 300px;
height: 30px;
background-color: #000;
overflow: hidden;
}
.hp {
position: relative;
width: 300px;
height: 100%;
transition: width 1s ease;
background-color: rgb(221, 58, 58);
}
.delay {
position: absolute;
top: 0;
left: 300px;
width: 300px;
height: 100%;
transition: all 1s ease;
background-image: linear-gradient(to right, yellow, red);
}
</style>
</head>
<body>
<div class="wrap">
<div id="hp" class="hp">
<div id="delay" class="delay"></div>
</div>
</div>
<script>
setTimeout(function () {
document.getElementById('hp').style.width = 0;
document.getElementById('delay').style.width = 0;
document.getElementById('delay').style.left = 0;
}, 1000)
</script>
</body>
</html>
复制代码这边用到了css的渐变，有关css渐变可以参考悟了悟了，妈妈再也不用担心我不会background-image之线性渐变篇
扫描二维码关注公众号，回复：
14145785 查看本文章
效果是有点像了，就是我们发现我们要实现的效果貌似底部的血条消失的会比外围的慢一些。
控制多个过渡属性
.delay {
position: absolute;
top: 0;
left: 300px;
width: 300px;
height: 100%;
transition: left 1s, width 2s;
background-image: linear-gradient(to right, yellow, red);
}
复制代码每个过渡的属性用逗号隔开，我们都用默认缓动函数可以省略ease，效果如下：
结语
关于血条消失术今天就讲到这里，总结来说用到的知识点仅仅是transition的有关知识。大家觉得自己能做出更逼真的效果，欢迎评论区留言讨论。