html5 渐变动画效果图,html5+css3城市场景动画_觉唯设计

最近一直在研究HTML5的动画表现，特别是在移动设备上的呈现。在上一篇文章《盛开的CSS3梦幻荷花》中提到如何用css3制作丰富动画效果的两个思路，当然除此之外，结合使用javascript脚本语言将可以实现更加强大的动画效果以及交互动作。

今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。

一、HTML结构

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

二、动画解析

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

天空的变化

.stage {

position: relative;

overflow: hidden;

height: 600px;

background: #ddf5f7;

-webkit-animation: skyset 110s infinite linear;

-moz-animation: skyset 110s infinite linear;

-o-animation: skyset 110s infinite linear;

animation: skyset 110s infinite linear;

}

@keyframes skyset {

0% {

background: #ddf5f7;

}

23% {

background: #ddf5f7;

}

25% {

background: #350847;

}

27% {

background: #0f192c;

}

50% {

background: #0f192c;

}

68% {

background: #0f192c;

}

75% {

background: #f9c7b8;

}

82% {

background: #ddf5f7;

}

100% {

background: #ddf5f7;

}

}

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

天黑遮罩层变化

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

.nightOverlay {

z-index: 9999;

posi