如何做一个炫酷的动画网站？目前网站制作技术已经非常成熟。所以要实现一个炫酷的动画网站还是非常容易，现在通过js和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 float-ud">
            <img src="bird.png" alt="" />
        </div>

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

animation-name: float;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 0s;

　　下面我们就用到的那些属性看看具体意思：

animation-name：是需要绑定到选择器的 keyframe 名称,实例中名称为：float
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。我们实例中设置的是4S。
animation-timing-function：规定动画的速度曲线。我们设置的是参数是ease-in-out---动画以低速开始和结束。
animation-delay：规定在动画开始之前的延迟。这个我们是默认是0秒
animation-iteration-count：规定动画应该播放的次数，实例中我们设置infinite无限次播放。

　　下面看看我们定义的float中用到的transform属性。transform属性是向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。我们案例中用到的是translateY这个参数。意思是定义转换，只是用 Y 轴的值。下面我们看看案例中的应用：

    transform: translateY(0px);这句意思是定义只是用 Y 轴转换的值为0像素，transform: translateY(-20px);意思是定义 Y 轴转换的值为-20个像素。

    关于如何使用css样式做一个动态网站小案例我们就分享到这里。这个案例主要用到animation属性和transform属性，希望以上内容可以对大家有一定的帮助，可以学到更多知识。本文city86网站原创作品，转载请注明出处。也可以把它分享出去让更多的人看到。

本文地址：http://www.city86.com/news_view_209/