css刷新回弹动画效果 |css引用不到图片

/* CSS 代码 */
.jump {
position: fixed;
bottom: 10%;
right: 30px;
opacity: 0;
transition: all 0.4s ease-out;
}
.jump.show {
opacity: 1;
transform: translateY(-50px);
}
.jump:hover {
transform: translateY(-60px);
}

上面的代码是实现回弹动画效果的样式代码。首先，大家需要把回到顶部按钮的 position 属性设置为 fixed，这样才能让按钮始终出现在页面的底部。接着，大家通过设置 bottom 和 right 属性，来调整按钮的位置。并且，通过设置 opacity 属性为 0，使按钮默认是隐藏的。

在完成了按钮的基本样式之后，大家需要为其添加动画效果。通过设置 transition 属性，来让按钮的所有属性在 0.4 秒的时间内平滑过渡。在按钮被点击后，大家需要添加一个类名 show，来让按钮的 opacity 属性变为 1，并通过 transform 属性，将其向上移动 50 像素。这样，按钮就会出现在页面上，并且带有一个从下往上弹起的动画效果。

此外，在按钮的 hover 状态下，大家还可以通过设置 transform 属性，来让按钮产生一个更明显的弹起效果。这样，就可以使回弹动画效果更加流畅和有趣。