css 上下漂浮动画

CSS上下漂浮动画是一种常见的网页动效，它可以让页面看起来更加生动、有趣。本文将介绍如何使用CSS实现上下漂浮动画效果。

/* CSS代码 */.float{
    animation: float 3s ease-in-out infinite;
}
@keyframes float{
from{
transform: translateY(0)}
50%{
transform: translateY(-15px)}
to{
transform: translateY(0)}
}
    

我们定义了一个名为float的class，同时给它添加了上下漂浮动画。这个动画的时长是3秒，缓动函数为ease-in-out，无限循环。

接着定义了一个名为float的关键帧动画。在开始时，我们将元素的位置设为原始位置（即 translateY(0)）。在50%的时候，将元素向上移动15像素（即 translateY(-15px)）。到动画结束时，将元素恢复到原位，即 translateY(0)。

为了让多个不同元素同时应用上下漂浮动画，我们可以给它们添加相同的class名（如上述float），或者使用继承等方式达到同样的效果。

在实际应用中，我们可以根据自己的需求修改动画的参数，如时长、缓动函数、移动距离等，以达到更好的视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！