我正在嘗試為 css 中緩慢出現的文本設定影片，但我無法使其流暢......它由 3 個單詞組成，并且會順利完成第一個單詞，但接下來的 2 個單詞會突然出現。
這是我的代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Not really my first website</title>
</head>
<body>
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
</body>
</html>
.header{
width: 100%;
top: 50%;
position: top;
left: 40%;
border-bottom: 5px solid greenyellow;
overflow: hidden;
animation: animate 2s linear forwards;
}
.header h1 {
color: green;
}
@keyframes animate {
0% {
width: 0px;
height: 0px;
}
20% {
width: 50px;
height: 0px;
}
50% {
width: 50px;
height: 80px;
}
}```
uj5u.com熱心網友回復：
關鍵幀不需要高度，問題是 h1 是一個塊元素，因為寬度為 0px，它會破壞單詞，但是如果你放入 awhite-space: nowrap;應該沒問題，也position: top;無效，不確定你在那里嘗試什么. PS我你希望他h1??是綠色的，首先是元素然后是類選擇器h1.header {color: green;}
.header {
white-space: nowrap;
overflow: hidden;
border-bottom: 5px solid greenyellow;
animation: animate 2s linear forwards;
}
h1.header {
color: green;
}
@keyframes animate {
0% {
width: 0px;
}
100% {
width: 100%;
}
}<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>uj5u.com熱心網友回復：
如果我正確理解了您的方法，那是因為您在關鍵幀中使用了 50px 寬度，并且它只能出現第一個單詞，您可以更改它
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/446105.html