Fatal编程技术网
  • css/
  • CSS-背景之间的转换

CSS-背景之间的转换

css angular

CSS-背景之间的转换,css,angular,css-transitions,gradient,Css,Angular,Css Transitions,Gradient,我想在单击更改背景时进行转换。原始背景是渐变，而第二个背景是应用于第一个背景的蓝色阴影。像这样： 发件人： 致： 我找不到一种方法来应用一个简单的0.3s转换来进行此更改 我的风格： body { background: linear-gradient(25deg, #b24592, #f15f79) no-repeat; } .layer { background: rgba(9, 21, 110, 0.37); mix-blend-mode: multiply;

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

发件人：

致：

我找不到一种方法来应用一个简单的0.3s转换来进行此更改

我的风格：

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%;
}
My.html：

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


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

提前感谢。

您不能转换渐变。请尝试转换.layer的不透明度或高度。不幸的是，
转换
不适用于
线性渐变
，而必须使用
不透明度
或在悬停时移动
背景位置

.magic{
背景：线性梯度（25度，#b24592，#f15f79）；
高度：200px；
宽度：200px；
}
.魔术：：之后{
背景：线性梯度（25度，#f15f79，#b24592）；
内容：''；
显示：块；
身高：100%；
不透明度：0；
过渡：不透明度。3s缓解；
宽度：100%；
}
.magic:hover:：after{
不透明度：1；
}
如果不更改线性渐变中的颜色或颜色位置，只需向叠加元素“.layer”添加不透明度属性并向其添加悬停事件即可

如果你试图改变颜色或它们的位置，你可以用gradient animator（它通过改变背景位置来实现，因为你不能将过渡或动画添加到css gradient）等工具添加渐变动画，并直接用js将其附加到身体上

这对点击事件而不是悬停有效吗？是的，更改css选择器
.magic:hover:：after
on'.magic.clicked:：after`和on click by JS将类
clicked
添加到您的背景元素（在我们的例子中是
.magic
）。它如何用于单击事件而不是悬停？是的，如果您使用JS，您可以这样做