我想动画用CSS填充文字。文本应该从左到右填充颜色。动画文字填充从左到右
这是我的CSS:
.box-with-text {
background-image: -webkit-linear-gradient(right, crimson 50%, white 50%);
background-repeat: repeat;
background-position: 0 0;
background-size: 200% 100%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes normal forwards ease-in-out;
animation: stripes 2s normal forwards ease-in-out;
}
现在只有第一个字母的颜色填充。
这很难说你所要求的模糊描述与那个小提琴配对。你提供的演示有什么问题?小提琴和你的目标有什么不同?那里有什么限制?如果你只是想从左到右有红色的“成长”,那么你就在正确的轨道上。看看代码,看看你可以做些什么来使红色增加,而不是使用'translate'(滑动) – MassDebates
你很接近。尝试使用设置进行播放。通过调整背景位置,大小和动画持续时间,我获得了许多不同的效果。 –
https://jsfiddle.net/xta0x9w9/2/ – DaniP