css通过透明度实现颜色渐弱然后渐强 - 《CSS学习笔记(联动HTML)》

<!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>
</head>

<body>
  <div class="colorblock1" id="b"></div>
  <button onclick="a()">变色</button>
  <style>
    .colorblock1 {
      width: 300px;
      height: 100px;
      margin: 20px auto;
      background-image: -webkit-linear-gradient(left, rgb(255, 0, 0), blue);
      /* Safari 5.1 - 6.0 */
      background-image: -o-linear-gradient(right, red, blue);
      /* Opera 11.1 - 12.0 */
      background-image: -moz-linear-gradient(right, red, blue);
      /* Firefox 3.6 - 15 */
      background-image: linear-gradient(to right, red, blue);
      /* 标准的语法（必须放在最后） */
      opacity: 1;
    }

    .colorblock2 {
      width: 300px;
      height: 100px;
      margin: 20px auto;
      background-image: -webkit-linear-gradient(left, rgba(228, 248, 50, 0.479), rgba(52, 235, 77, 0.932));
      /* Safari 5.1 - 6.0 */
      background-image: -o-linear-gradient(right, rgba(228, 248, 50, 0.473), rgba(52, 235, 77, 0.932));
      /* Opera 11.1 - 12.0 */
      background-image: -moz-linear-gradient(right, rgba(228, 248, 50, 0.473), rgba(52, 235, 77, 0.932));
      /* Firefox 3.6 - 15 */
      background-image: linear-gradient(to right, rgba(228, 248, 50, 0.438), rgba(52, 235, 77, 0.932));
      /* 标准的语法（必须放在最后） */
      opacity: 0;
    }
  </style>
  <script>
    //实现颜色渐弱然后渐强
    function a() {
      let d = document.getElementById('b')
      let j = 1
      let z = 0

      for (let i = 1; i >= 0; i = i - 0.001) {
        setTimeout(function () {
          d.style.cssText = ` opacity: ${j}; `
          j = j - 0.001
        }, i * 400)
      }
      setTimeout(function () {
        d.setAttribute("class", "colorblock2")
      }, 500)

      for (let i = 0, j = 2; i <= 1; i = i + 0.001, j = j - 0.001) {
        setTimeout(function () {
          d.style.cssText = ` opacity: ${z}; 
          `
          z = z + 0.001
        }, j * 600)
      }
    }
  </script>
</body>

</html>

原理：通过 JS 函数修改颜色的透明度属性，从1到0逐渐减少透明度就会让颜色消失，再从0到1逐渐增加透明度就可以让颜色重新出现，如果在消失和出现之间在变换样式颜色，就可以实现颜色从一个颜色逐渐变为另一个颜色。

方法L：利用for循环，和三个 setTimeout安排渐变和颜色改变的顺序，三个setTimeout的延迟经过测试，可以是 400，500，600或者他们的倍数。
透明度的递增递减的步长最好在0.001的数量级最好。

让透明度改变呈现一个加速再减速的效果
更多js动画效果：https://www.jb51.net/article/74686.htm