使文本颜色变暗过渡在CSS中不起作用[重复]

brc7rcf0 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(118)

- 此问题在此处已有答案**：

（19个答案）
昨天关门了。
我试图使一些文本黑暗的CSS时，你悬停在它，可悲的是，它不正确的工作。我想一个平滑的过渡，但它只是从一个到另一个。

浏览器：Chrome
操作系统：Win11

下面是我的代码：

.maintext {
    font-size: 50px;
    background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.maintext:hover {
    background: linear-gradient(to right, #b11b54, #9b4104, #7e177e, #867d28);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    transition: 0.3s;
}

<p class="maintext">Hello, world!</p>

css

来源：https://stackoverflow.com/questions/75347646/making-text-color-darker-transition-not-working-in-css

1条答案

按热度按时间

ddhy6vgd1#

目前CSS中渐变的过渡是not easy，需要使用CSSPropertyRule，目前CSSPropertyRule的参数是limited browser support。
但是，如果您的目标只是在将鼠标悬停在渐变上时使其变暗，则可以通过应用brightness CSS滤镜来实现。

.maintext {
    font-size: 50px;
    background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    
    filter: brightness(1);
    transition: filter 0.3s;
}

.maintext:hover {
    filter: brightness(0.5);
}

<p class="maintext">Hello, world!</p>

赞(0）回复(0）举报 2023-02-06

我来回答

使文本颜色变暗过渡在CSS中不起作用[重复]

1条答案

相关问题

热门标签

最新问答