如何解决径向渐变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动画
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。