CSS3教程

当前位置: HTML5技术网 > CSS3教程 > HTML5+CSS3城市场景动画

HTML5+CSS3城市场景动画

  

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



  一、HTML结构


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

  二、动画解析

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

  天空的变化

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

  天黑遮罩层变化

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

  太阳自转以及动画

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


  云朵的移动

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

  三、城市场景组成图片

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

 

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

【HTML5+CSS3城市场景动画】相关文章

1. HTML5+CSS3城市场景动画

2. 中国一线城市:微博比广播电影更火爆

3. Lienzo 1.0:HTML5 Canvas元素的Java版本场景图API

4. 基于HTML5的无限循环放大场景

5. 一款基于jQuery的图片场景标注提示弹窗特效

6. 构建手机浏览器云能力 实现跨平台多场景需求

7. CSS3动画效果-animate.css

8. CSS动画集合 可直接生成动画代码 – AniCollection

9. 构建HTML5应用程序:CSS3 效果、过渡和动画

10. Effeckt.css项目:CSS交互动画应用集锦

本文来源:https://www.51html5.com/a936.html

点击展开全部

﹝HTML5+CSS3城市场景动画﹞相关内容

「HTML5+CSS3城市场景动画」相关专题

其它栏目

也许您还喜欢