我在做一个项目,里面有一段文字(这是“祝你生日快乐”)和一颗心。在开始时,心下降,击中第一个单词,然后第二个,以此类推。当心击中文本,它应该变成黄色。当心击中最后一个单词,1或2秒后,文字褪色,并重新出现与以前的颜色。2我已经做了变换属性,但搞砸了颜色。3请建议我一些解决办法。
.main .text{
font-size: 50px;
font-family: cursive;
color: white;
animation: opacity-control 3.5s infinite;
}
.main .text span{
display: inline-block;
animation: text-jump 3.5s ease-in-out infinite, color-change 3.5s infinite;
}
.main .text span:nth-child(1){
animation-delay: 0.25s;
}
.main .text span:nth-child(2){
animation-delay: 0.5s;
}
.main .text span:nth-child(3){
animation-delay: 0.75s;
}
.main .text span:nth-child(4){
animation-delay: 1s;
}
.main .text span:nth-child(5){
animation-delay: 1.25s;
}
@keyframes text-jump{
0%{
transform: translateY(0);
color: yellow;
}
10%{
transform: translateY(20px);
color: yellow;
}
15%{
transform: translateY(0);
color: yellow;
}
100%{
color: yellow;
}
}
@keyframes opacity-control{
0%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes color-change{
0%{
}
40%{
color: yellow;
}
95%{
color: yellow;
}
100%{
color: white;
}
}
1条答案
按热度按时间wr98u20j1#
你不需要2个单独的动画来改变文本颜色,使其'跳转'。
将它们组合在一起,删除100%步长(不需要),然后更改15%步长,以便在设置动画后将文本更改回白色。
将此更改为仅使用一个新动画: