我不想让 h1 文本在滚动的同时垂直向上移动，它会将字体大小从 300 更改为 50。我已经完成了代码的第二部分（大小更改），但不知道如何制作滚动时文本垂直向上移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NBA</title>
<link rel="icon" sizes="1800x1800" href="Images/logo.png">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="heading">
<h1>NBA</h1>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
在 CSS 文件中，为“scroll-text”类创建关键帧动画。例如：
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
然后将动画添加到“scroll-text”类中，并具有所需的持续时间和计时功能：
.scroll-text {
animation: scroll 2s ease-in-out infinite;
}
您还可以使用scroll-behavior属性使文本平滑滚动。
.scroll-text {
scroll-behavior: smooth;
}