如何使用css动画更改css动画中的字体颜色
本文介绍了如何使用css动画更改css动画中的字体颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试这样做，当我打开页面时，test将显示为红色，testing将显示为白色。我希望保留打开页面时使用的延迟(如果运行程序，您将看到该延迟)。
css
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
@keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@keyframes text_reveal {
100% {
color: white;
}
}
HTML
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
推荐答案
您的意思是这样吗？请参阅/* added CSS */
下的更改
数据-lang=”js”数据-隐藏=”假”数据-控制台=”真”数据-巴贝尔=”假”>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: grey;
}
html {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
@keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@keyframes text_reveal {
100% {
color: white;
}
}
/* added CSS */
.red {
animation: text_reveal_red ease forwards;
animation-delay: 1s;
animation-iteration-count: 1;
}
@keyframes text_reveal_red {
100% {
color: crimson;
}
}<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>这篇关于如何使用css动画更改css动画中的字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，