如何做一个炫酷的动画网站-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);
   }
}

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

下面我们一起来看看这个样式中用到哪些属性，我们具体来说说。
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属性，希望以上内容可以对大家有一定的帮助，可以学到更多知识。转载请注明出处。

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

python实现动态壁纸_流弊了！竟然用Python做一个炫酷的小姐姐动态壁纸
原标题:流弊了!竟然用Python做一个炫酷的小姐姐动态壁纸公众号关注 " 菜鸟学Python" 设为 "星标",每天带你玩转Python! (女神IU,图片 ...
一个炫酷的flash网站模板
这是一个炫酷的flash欧美网站模板,它包括首页,公司简介,留言等五个页面,界面转换非常的炫酷!他还有时间.全屏.背景音乐开关的功能!有兴趣的朋友可以看看!贴几张网站图片给大家看看! 下载后直接找到s ...
最近 Flutter 争气了！ Flutter 也可以做这么炫酷的动画
在 2019 年的谷歌 I/O 大会上,开发团队发布了 Flutter for web 的首个技术预览版,宣布 Flutter 正在为包括 Google Home Hub 在内的 Google 智能显 ...
现学现卖做一个炫酷的动态背景页面
很喜欢酷炫的页面,自从看了抖音的主页之后(如下)(链接),就决定要也做一个牛逼的动态背景页面对...背景是视频,而且还有音效,太牛逼了然后决定自己做一个,废话不说,先弄代码: 这里为了设计简便,用 ...
像360悬浮窗那样，用WindowManager做一个炫酷的悬浮迷你音乐盒（下）
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布在上一篇文章像360悬浮窗那样,用WindowManager实现炫酷的悬浮迷你音乐盒(上)中我粗粗的向大家介绍了WindowMan ...
如何利用GitHub设计一个炫酷的个人网站（含代码）
1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...
流弊了！竟然用Python做一个炫酷的小姐姐动态壁纸！
(女神IU,图片来自网络) 最近小编在浏览网页的时候,发现一个网页的背景是动态显示的,非常的炫酷.正好小编最近犯花痴,心仪的女神是韩国的小美女IU, 清纯可爱的小姐姐--关键中文歌还唱的很好. 于是码 ...
像360悬浮窗那样，用WindowManager做一个炫酷的悬浮迷你音乐盒（上）
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布记得上一篇讲的是用RotateDrawable实现网易云音乐唱片机效果,而今天我要讲的是如何用WindowManager去实现一个 ...
python 天气预报地图_在树莓派上用 python 做一个炫酷的天气预报
#encoding: utf-8 importpygameimporttimeimportweatherAPIimportSystemInfofrom datetime importdatetime# ...

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

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

最新文章

热门文章