gpt4 book ai didi

html - 是否可以为 -webkit-text-fill-color 设置动画?

转载 作者:行者123 更新时间:2023-11-28 15:57:35 25 4
gpt4 key购买 nike

我正在尝试为一些文本添加动画

h1 {
font-family: sans-serif;
color: black;
animation: danger-zone 3s linear infinite;
animation-direction: alternate;
font-size:60px;

-webkit-text-stroke-width: 2px;
}

@keyframes danger-zone {
0% {

-webkit-text-fill-color: black;
-webkit-text-stroke-color: black;
}

100% {

-webkit-text-fill-color: white;
-webkit-text-stroke-color: white;
}
}
<h1>Here's a title!</h1>

出于某种原因,只有描边看起来是动画的,而填充颜色只是在(我猜)50% 时切换。是否可以仅在 CSS 中为填充颜色设置动画?

编辑:它似乎适用于 Firefox,而非 Chrome。现在要测试其他一些浏览器

最佳答案

chrome 好像不喜欢 -color 后缀,试试这个:

h1 {
font-family: sans-serif;
color: black;
animation: danger-zone 3s linear infinite;
animation-direction: alternate;
font-size: 60px;
-webkit-text-stroke-width: 2px;
}
@keyframes danger-zone {
0% {
color: black;
-webkit-text-stroke: 2px black;
}
100% {
color: white;
-webkit-text-stroke: 2px white;
}
}
<h1>Here's a title!</h1>

关于html - 是否可以为 -webkit-text-fill-color 设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40788178/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com