use*_*189 8 html css css3 css-animations
在我的网站中,我希望有一个淡入淡出的标题,然后使用不同的文本,然后输出,然后恢复正常(循环).以下是我希望它的工作方式:
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动画中的文本.这可能吗？
小智 15
一个小时前，被困在同样的问题上，但我的决定是这样的。刚刚粘贴了我自己的代码的一部分。看看吧，伙计们！
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>有两种方法可以做到这一点.一种是通过伪元素管理内容.这意味着显示的内容将应用于CSS; 像这样:
h1:before{
content: 'Original Text';
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; content: "Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; content: "Original Text"}
}
另一种方法是通过在HTML中包含两个元素并在它们之间切换.您需要两个动画才能共同完成此操作,或者您可能只能偏移一个动画,如下所示:
<header>
<h1 class="headtext" id="text1">Original Text</h1>
<h1 class="headtext" id="text2">Changed Text</h1>
</header>
.headtext{
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#text2{
animation-delay: 2s;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
50% {font-size:0; opacity:0;}
100% {font-size:600%;opacity:1;}
}
我已经缩小了font-size以便0为其他文本提供空间.这可能与您想要的效果不同.