javascript - 如何平滑地更改背景颜色？

Question

这是有问题的代码 - https://codepen.io/illpill/pen/VbeVEq

function newColor() {
    var randomNumber = Math.floor(Math.random() * (colors.length));
    document.body.style.backgroundColor = colors[randomNumber];
}

现在是 newColor() 函数...

当点击按钮时，我希望它能平滑地过渡到下一个引用而不是突然加载它。我还希望报价逐渐变成白色，然后变成新的报价...这是如何实现的？使用 jQuery 更好吗？

谢谢!

Answer 1

为 background-color 属性添加过渡到你的 body 。

body {
  transition : background-color 1s ease-in-out;
}

要将过渡添加到您应该编写的任何元素，

element-selector {
  transition: [CSS property] [duration] [timing-function];
}

对于标题标签，它将是

h3,h4 {
  transition: [css property] [duration] [timing-function]
}

Transition only works when there is a change in the CSS property specified for the given element.