css就只生成上下滚轮跳 |css目标规则后面的字改不了

.scroll {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
font-size: 30px;
line-height: 50px;
cursor: pointer;
animation: upDown 1s ease-in-out infinite;
}
@keyframes upDown {
0%, 100% {
transform: translate(-50%, -50%);
}
50% {
transform: translate(-50%, -70%);
}
}

首先，大家需要一个元素来实现上下滚轮跳的效果。在这里，大家使用一个圆形的div元素，设置样式为“scroll”，并利用CSS动画实现上下跳动。

具体来说，大家将元素的位置设置为固定的，位于页面正中间，通过“transform: translate()”属性来实现。同时，设置元素的“background-color”为浅灰色，“border-radius”为50%，呈现出圆形的样式。元素的大小为50px x 50px，文本水平和垂直居中，字体大小为30px。

接下来，大家定义了一个名为“upDown”的关键帧动画，用于让元素在不断地上下跳动。具体来说，动画分为三个阶段：0%时，元素位于页面正中间；50%时，元素向上移动20%的距离，即“-70%”；100%时，元素回到页面正中间。设置动画为1秒，以“ease-in-out”的速度播放，且无限循环。

最后，大家只需要在HTML文档中添加这个元素即可：

<div class="scroll">↑</div>

这里的“↑”是上箭头的符号，可以用作div元素中的内容，呈现出向上跳的效果。