径向渐变CSS过渡

问题描述

我有一个div和background-image和radial-gradiant，像这样：

.main-header {
  z-index: 2;
  padding: 1rem;
  background: var(--themeColor3);
  margin-bottom: 1rem;
  padding-bottom: 3.5rem;
  clip-path: polygon(50% 0%,100% 0,100% 65%,50% 100%,0 65%,0 0);
  text-align: center;
  height: 300px;
  background: radial-gradient(30% 65% at 50% 50%,rgba(0,0) 35%,#222226 60%),url('./assets/images/jpkMain.png');
  background-repeat: no-repeat;
  background-position: center;
  transition: background 5s;
}

当我这样悬停时，我正在尝试增大径向渐变圆：

.main-header:hover {
  background: radial-gradient(32% 75% at 50% 50%,url('./assets/images/jpkMain.png');
  background-repeat: no-repeat;
  background-position: center;
}

这是我的JSX代码：

    render() {
        return (
            <div className="container">

                <header className="main-header">
                </header>
            </div>
        )
    }

解决方法

不，您不能在一个元素上同时使用两个元素，因为渐变是作为背景图像呈现的： https://www.w3schools.com/css/css3_gradients.asp

您可以将透明元素放在图像上方（在悬停时会改变不透明性的元素）上方（z索引）。

此外，渐变仍然无法转换，但是正如我提到的，您可以使用不透明度。或尝试制作SVG动画

css-transitions radial-gradients