CSS - 背景之间的过渡答案

【问题标题】：CSS - Transition between backgroundsCSS - 背景之间的过渡
【发布时间】：2021-08-13 22:25:11
【问题描述】：

我希望在点击更改背景时进行过渡。原始背景是渐变，而第二个背景是应用于第一个背景的蓝色阴影。像这样：

发件人：

收件人：

我找不到一种方法来为这个更改应用一个简单的 0.3 秒过渡。

我的风格：

body {
    background: linear-gradient(25deg, #b24592, #f15f79) no-repeat;
}

.layer {
    background: rgba(9, 21, 110, 0.37);
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

我的 .html：

<body>
    <div class="layer" [hidden]="shopIsOpen">
    </div>
    ...
</body>

如何在点击事件上实现这两个背景之间的简单转换？

提前致谢。

【问题讨论】：

标签： css angular css-transitions gradient

【解决方案1】：

您不能过渡渐变。尝试转换 .layer 的不透明度或高度

【讨论】：

【解决方案2】：

很遗憾，transition 不能与 linear-gradient 一起使用，您必须使用 opacity 或在悬停时移动 background-position。

.magic {
  background: linear-gradient(25deg, #b24592, #f15f79);
  height: 200px;
  width: 200px;
}

.magic::after {
  background: linear-gradient(25deg, #f15f79, #b24592);
  content: '';
  display: block;
  height: 100%;
  opacity: 0;
  transition: opacity .3s ease;
  width: 100%;
}

.magic:hover::after {
  opacity: 1;
}

&lt;div class="magic"&gt;&lt;/div&gt;

【讨论】：

这是否适用于点击事件而不是悬停？
是的，在 '.magic.clicked::after` 上更改 css 选择器 .magic:hover::after 并通过 JS 将类 clicked 添加到您的背景元素（在我们的例子中是 .magic）。

【解决方案3】：

如果您不更改线性渐变中的颜色或颜色位置，您只需将 opacity 属性添加到覆盖元素“.layer”并为其添加悬停事件

如果您尝试更改颜色或其位置，您可以使用渐变动画器等工具添加渐变动画（通过更改背景位置来实现，因为您无法将过渡或动画添加到 css 渐变）并直接用js附加到body中

【讨论】：

如何处理点击事件而不是悬停？
是的，如果你使用的是js，你可以做到