记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[HTML5/CSS3] HTML5+CSS3城市场景动画[含9P]

[复制链接]
发表于 2017-5-24 12:54:39 | 显示全部楼层 |阅读模式
  
  最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果;除此之外,页面的视觉效果采用了插画的设计风格,希望大家会喜欢。


HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500dlawpoto2pc5e2p8 1



  一、HTML结构


  这个示例中的HTML结构采用了HTML5的语言来编写,代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的,最后再重组成一个完整的动画效果。
HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500n7mlkdv6h6gvjie6 2

  二、动画解析
  整个城市场景的动画是由若干个元素的动画组成,如:天空的变化、云朵的运动、太阳的自转等等。在下面我们一一来为大家解析每个动画的实现思路以及代码组成。
  天空的变化
  天空的颜色逐渐的变暗然后又变亮,这是一个有序的过程,但得注意时间的安排。
HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500mzyyberexr3ee4ox 3

  天黑遮罩层变化
  当天空变暗时,也就是到黑夜时,整个城市也是变暗的,所以我们在整个城市的上方加个遮罩层,以背景色来实现,逐渐改变其透明度来实现变化。
HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500kige6ya6zgjexuj6 4

  太阳自转以及动画
  在这里我们需要两个图标,一个是白天的太阳(黄色),一个是夜晚的太阳(黑色)。然后我们再让这个图片轮流显示在画面上就行。
HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500hdc2jdd4y5dl0h0b 5



  云朵的移动
  示例中总共有三朵云朵,分别为大、中、小,为了有更加逼真的效果,我们要分别定义三朵云朵的运动速度、位置以及大小。
HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500e6guhurr481gknmk 6HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500stqt8mcx4qcq88p8 7

  三、城市场景组成图片
  最后,就是我们城市场景的图片组件了。
HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500bccjucxdm5gudzij 8

  HTML5+CSS3城市场景动画 背景色,透明度,HTML5,动画,风格 【HTML】 125500zju55j6ak3u57jb5 9

  我们的示例分享就到这里,希望大家会喜欢,更加希望大家可以拿这个小小的示例多加练习,多加研究每个动画的实现技巧。
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表