大家玩英雄联盟或者王者荣耀的时候，应该对血条不陌生吧，对血条消失术也不陌生吧？

尤其是无脑冲的小白，我是谁？我在哪？下面我们用css来一步一步实现这个效果

1.直接消失

血条消失术？用css教你实现

代码很简单，过一秒宽度变成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.加上过渡效果

血条消失术？用css教你实现

代码就加了一句：transition: width 1s

.hp {
    width: 100%;
    height: 100%;
    transition: width 1s ease;
    background-color: rgb(221, 58, 58);
}

指定过渡的速度曲线

transition-timing-function属性规html代码定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

  • easeelementary翻译– 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
  • linear– 规定从开始到结束具有相同速度的过渡效果
  • ease-in-规定缓慢开始的过渡效果
  • ease-out– 规定缓慢结束的过渡效果
  • ease-in-out– 规定开始和结束较慢的过渡效果
  • cubic-bezier(n,n,nhtml代码,n)– 允许您在html个人网页完整代码三次贝塞尔函数中定义自己的值

不得不说默认的效果跟预期还挺接近的，大家可以试试其他几个参数，看看都是啥效果。如果都不适合，可以试试三次贝塞尔函数，我数学没学好，就不献丑了。

3.加上延迟扣血效果

血条消失术？用css教你实现

<!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之线性渐变篇

效果是有点像了，就是我们发现我们要实现的效果貌似底部的element翻译血条消失的会比外围的慢一些。

控制多个过渡属性html

.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，仓鼠饲养八大禁忌效果如下：

血条消失术？用css教你实现

结语

关于血条消失http://192.168.1.1登录术今天就讲到这里，总结来说用到的知识点仅仅是transition的有关知识。大家觉得自己能做出更逼真的效果，欢迎评论区留言讨论。

往期html5作品

扫福开始了，自己写个福来扫啊~

从零开始做一个贪吃蛇游戏，会vue就行