|
[tr][td]
最近一直在研究HTML5的动画表现，特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果;除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。 图片：1038570ctbn0qcn5t01t1c.jpg  一、HTML结构 这个示例中的HTML结构采用了HTML5的语言来编写，代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的，最后再重组成一个完整的动画效果。 图片：1038570ctbn0qcn5t01t1c.jpg 二、动画解析 整个城市场景的动画是由若干个元素的动画组成，如：天空的变化、云朵的运动、太阳的自转等等。在下面我们一一来为大家解析每个动画的实现思路以及代码组成。 天空的变化 天空的颜色逐渐的变暗然后又变亮，这是一个有序的过程，但得注意时间的安排。 图片：1038570ctbn0qcn5t01t1c.jpg 天黑遮罩层变化 当天空变暗时，也就是到黑夜时，整个城市也是变暗的，所以我们在整个城市的上方加个遮罩层，以背景色来实现，逐渐改变其透明度来实现变化。 图片：1038570ctbn0qcn5t01t1c.jpg 太阳自转以及动画 在这里我们需要两个图标，一个是白天的太阳(黄色)，一个是夜晚的太阳(黑色)。然后我们再让这个图片轮流显示在画面上就行。 图片：1038570ctbn0qcn5t01t1c.jpg 云朵的移动 示例中总共有三朵云朵，分别为大、中、小，为了有更加逼真的效果，我们要分别定义三朵云朵的运动速度、位置以及大小。 图片：1038570ctbn0qcn5t01t1c.jpg 图片：1038570ctbn0qcn5t01t1c.jpg 三、城市场景组成图片 最后，就是我们城市场景的图片组件了。 图片：1038570ctbn0qcn5t01t1c.jpg 图片：1038570ctbn0qcn5t01t1c.jpg 我们的示例分享就到这里，希望大家会喜欢，更加希望大家可以拿这个小小的示例多加练习，多加研究每个动画的实现技巧。 [/td][/tr] |
|
