HTML5+CSS3城市场景动画


     最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳、云朵、...

  

  最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果;除此之外,页面的视觉效果采用了插画的设计风格,希望大家会喜欢。



  一、HTML结构


  这个示例中的HTML结构采用了HTML5的语言来编写,代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的,最后再重组成一个完整的动画效果。

  二、动画解析

  整个城市场景的动画是由若干个元素的动画组成,如:天空的变化、云朵的运动、太阳的自转等等。在下面我们一一来为大家解析每个动画的实现思路以及代码组成。

  天空的变化

  天空的颜色逐渐的变暗然后又变亮,这是一个有序的过程,但得注意时间的安排。

  天黑遮罩层变化

  当天空变暗时,也就是到黑夜时,整个城市也是变暗的,所以我们在整个城市的上方加个遮罩层,以背景色来实现,逐渐改变其透明度来实现变化。

  太阳自转以及动画

  在这里我们需要两个图标,一个是白天的太阳(黄色),一个是夜晚的太阳(黑色)。然后我们再让这个图片轮流显示在画面上就行。


  云朵的移动

  示例中总共有三朵云朵,分别为大、中、小,为了有更加逼真的效果,我们要分别定义三朵云朵的运动速度、位置以及大小。

  三、城市场景组成图片

  最后,就是我们城市场景的图片组件了。

 

  我们的示例分享就到这里,希望大家会喜欢,更加希望大家可以拿这个小小的示例多加练习,多加研究每个动画的实现技巧。

标签: 动漫动画

更多 动漫 相关资讯

CSS3动画效果-animate.css

CSS3动画效果-animate.css

animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体验。动画效果包括强调突出,滑块,淡入淡出,放大缩

WebKit CSS3 动画基础

前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下。 首先看看效果 http://webdeveloperjuice.com/demos/css/css3effects.html 很悲剧的是css3动画现在只有WebKit内

更多 动画 相关资讯

[视频]纯CSS3腾讯QQ企鹅(附绘制过程)

[视频]纯CSS3腾讯QQ企鹅(附绘制过程)

腾讯Web前端AlloyTeam近日推出了最新开源项目:一个基于HTML5技术的专业级图像处理引擎——AlloyImage(简称AI),以及一个在线Web图像处理平台——AlloyPhoto(简称AP)。

CSS3 Animation(上)

CSS3 Animation(上)

单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl

CSS3动画效果-animate.css

CSS3动画效果-animate.css

animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体验。动画效果包括强调突出,滑块,淡入淡出,放大缩

WebKit CSS3 动画基础

前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下。 首先看看效果 http://webdeveloperjuice.com/demos/css/css3effects.html 很悲剧的是css3动画现在只有WebKit内

利用CSS3制作动画效果

概述 在CSS3中新增了几个很好玩的东东:CSS Animation,CSS Transition 和 CSS Transform,顾名思义就是通过CSS来实现动画,过渡和变形。 它们与HTML5中的canvas能绘制动画图形不

利用CSS3制作动画效果

概述 在CSS3中新增了几个很好玩的东东:CSS Animation,CSS Transition 和 CSS Transform,顾名思义就是通过CSS来实现动画,过渡和变形。 它们与HTML5中的canvas能绘制动画图形不同