如何做一个炫酷的动画网站-css实现图片上下浮动效果

目前网站制作技术已经非常成熟。所以要实现一个炫酷的动画网站还是非常容易，现在通过js和css就都能实现。直接css就能实现各种效果，下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动。

效果就是图片上下浮动，如何实现？其实只需要先定义一个样式。
先定义一个样式文件main.css，然后定义样式为：

 .float-ud {
  animation: float 4s ease-in-out infinite;

  }

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

然后在网页中调用这个样式。

        <div class="nf-relative nf-size-200 float-ud">
            <img src="/template/[TemplateName]/uploads/bird.png" alt="" fr-edit="" />
        </div>

下面我们一起来看看这个样式中用到哪些属性，我们具体来说说。
animation: float 4s ease-in-out infinite;
这一句代码说的animation属性是一个简写属性，这其中用到