在我的网站中，我想要一个淡入和淡出的标题，然后以不同的文本淡入，然后淡出，然后恢复正常(循环)。这是我希望它的工作方式:
h1 {
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}
但是，我还没有找到任何方法来更改 CSS3 动画中的文本。这可能吗？
最佳答案
一个小时前，一直被同样的问题困扰，但我的决定是这样的。只是粘贴了一部分我自己的代码。看看吧，伙计们!
body {
margin: 0;
font-family: sans-serif;
}
#wrapper {
background-color: #051E3E;
height: 100vh;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#hi {
animation: pulse 5s;
}
@keyframes pulse {
0% {
color: #051E3E;
}
10% {
color: #051E3E;
}
30% {
color: white;
}
50% {
color: #051E3E;
}
60% {
color: #051E3E;
}
80% {
color: white;
}
100% {
color: #051E3E;
}
}
#hi:after {
content: "";
animation: spin 5s linear;
}
@keyframes spin {
0% { content:"Hi"; }
100% { content:"How do you like it?"; }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<p id="hi"></p>
</div>
</body>
</html>关于html - 使用 CSS3 动画更改文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42236440/