建站百科

NEWS

如何做一个炫酷的动画网站

2022/4/12 16:16:06 阅读()


  如何做一个炫酷的动画网站?目前网站制作技术已经非常成熟。所以要实现一个炫酷的动画网站还是非常容易,现在通过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/

    服务热线

    24小时咨询:

    15054251826

    业务咨询:

    15966820013(微信同号)

    官方微信

    关注公众号

    扫一扫加微信

    Copyright © 2011-2022 青岛诚企网络 city86.com
    青岛诚企网络专业企业网站建设-企业快速建站-成品网站制作-网站定制-网站设计-专业网站建设公司.

    在线客服

    Online Service