Question

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

来自：

致：

我找不到一种方法来为这个变化应用一个简单的 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>

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

提前致谢。

Answer 1

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

Answer 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;
}

<div class="magic"></div>

Answer 3

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

如果你想改变颜色或它们的位置，你可以使用诸如gradient-animator之类的工具添加渐变动画（它通过改变背景位置来实现，因为你不能向css渐变添加过渡或动画）并直接用js附加到body中

CSS - 背景之间的过渡

3 个答案: