Question

你好我需要动画更改div的背景，新背景从上面向下滑动。

This is an example of what I can do now and the context of my question.

我需要通过添加和删除类来触发动画：

.token {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  margin-bottom: 20px;
  transition: background 1000ms linear;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

正如你所看到的，我已经放了一个小动画，但我不确定单独使用CSS是否可以实现下滑效果。

我想要的是能够创建多个类，每个类通过向下滑动来改变它们应用于div的背景。

我需要通过添加一个类来触发动画，该类应该包含要转换的颜色。

Answer 1

您可以对颜色使用线性渐变，您可以通过调整background-size来创建效果。

这是一个想法：

let previousClass="";
function color(className) {
  $('#token').removeClass(previousClass);
  previousClass=className;
  setTimeout(function() {
      $('#token').addClass(previousClass);
  }, 500);

}

.token {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  margin-bottom: 20px;
  background-size: 100% 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white);
  transition: 0.5s background-size linear;
}

.red {
  background-image: linear-gradient(red, red);
  background-size: 100% 100%;
}

.blue {
  background-image: linear-gradient(blue, blue);
  background-size: 100% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="token" id="token"></div>
<button onclick="color('red')">Red</button>
<button onclick="color('blue')">Blue</button>

添加/删除类时，动画背景颜色向下滑动，仅使用CSS？

1 个答案: