Html 希望平稳过渡到悬停状态

问题是，background和clip-path最初并没有设置为非悬停状态.因此，当你悬停时，它会过渡到渐变背景和剪裁形状，但当你移除悬停时，它没有什么可以过渡到的(因此立即消失).

只需将相同的background和clip-path复制到非悬停状态，即可修复此问题.这应该很好，因为你无论如何都是从0不透明度过渡到1不透明度.我在您的网站上使用DevTool进行了测试，它似乎起作用了.

.wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow::before {

content:"";
position: absolute;
inset: 0;
transition: all .2s ease-in-out;
opacity: 0;
/* SAME BACKGROUND ON NON-HOVER */
background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
/* SAME CLIP-PATH ON NON-HOVER */
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0); 

}

.wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow:hover::before {

background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
transform: translate3d(0,0,-1px);
filter: blur(10px);
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0);  
opacity: 1;
}

编辑:事实上，您不妨将background和clip-path从悬停状态中移除，并保持非悬停状态，因为它们根本不会改变.重要的是filter和opacity的过渡是正确的.