• 明天我们家宝宝满月了
  • 一晚上忙了好几个小时,终于把支付前台通知解决了
  • 原计划要增加另外一种支付方案,现在可能要被搁置了
  • 今天上午刚刚注册了华为云,然后刚刚华为云的客服小姐姐就来电话了,小姐姐声音挺好听的
  • 今天无意中注册了华为云,然后发现跟阿里云基本一个模样,甚至连价格都一样
  • 继续测试一下
  • 发现一个问题就是,微信语音发送说说的时候,不要拦截没有UA的数据请求
  • 测试一下连接
  • 终于下雪了
  • 有赞的支付暂时用不了了,所以重新开发另一个支付插件

HTML5+CSS3城市场景动画

网络技术 云落 4年前 (2014-10-11) 455次浏览 已收录 0个评论

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

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

HTML5+CSS3城市场景动画

查看预览下载附件

一、HTML结构

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

<section>    <div class="stage">      <div class="nightOverlay"></div>      <div class="skyline"></div>      <div class="beans"></div>      <div class="ground back"></div>      <div class="ground mid"></div>      <div class="ground front"></div>      <div class="cloud large"></div>      <div class="cloud small"></div>      <div class="cloud medium"></div>      <div class="balloon"></div>      <div class="dowEventCenter"></div>      <div class="planetarium"></div>      <div class="friendshipShell"></div>      <div class="glockenspiel"></div>      <div class="rotation">        <div class="sun"></div>        <div class="moon"></div>      </div>    </div>  </section>

二、动画解析

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

天空的变化
.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;  	position: absolute;  	top: 0;  	left: 0;  	right: 0;  	bottom: 0;  	background: rgba(15, 25, 44, 0.7);  	opacity: 0;  	-webkit-animation: set 110s infinite linear;  	-moz-animation: set 110s infinite linear;  	-o-animation: set 110s infinite linear;  	animation: set 110s infinite linear;  }   @keyframes set {   0% {   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);   opacity: 0;  }   50% {   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);   opacity: 1;  }   100% {   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);   opacity: 0;  }  }
太阳自转以及动画

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

.rotation {  	position: absolute;  	z-index: 1;  	left: 50%;  	top: 50%;  	margin: -350px 0 0 -350px;  	height: 700px;  	width: 700px;  	-webkit-transform: rotate(45deg);  	-moz-transform: rotate(45deg);  	-ms-transform: rotate(45deg);  	-o-transform: rotate(45deg);  	transform: rotate(45deg);  	-webkit-animation: rotation 110s infinite linear;  	-moz-animation: rotation 110s infinite linear;  	-o-animation: rotation 110s infinite linear;  	animation: rotation 110s infinite linear;  }   @keyframes rotation {   0% {   transform: rotate(45deg);  }   100% {   transform: rotate(405deg);  }  }  .sun, .moon {  position: absolute;  height: 145px;  width: 145px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  }  .sun {  top: 0;  left: 0;  background: yellow;  }  .moon {  bottom: 0;  right: 0;  background: black;  }
云朵的移动

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

.cloud {  	position: absolute;  }  .cloud.small {  	z-index: 1;  	top: 5%;  	left: 15%;  	background: url(images/cloudSmall.png) no-repeat no-repeat center;  	height: 50px;  	width: 89px;  	-webkit-animation: cloudSmall 165s infinite;  	-moz-animation: cloudSmall 165s infinite;  	-o-animation: cloudSmall 165s infinite;  	animation: cloudSmall 165s infinite;  }  .cloud.medium {  	z-index: 3;  	top: 25%;  	left: 30%;  	background: url(images/cloudMedium.png) no-repeat no-repeat center;  	height: 92px;  	width: 159px;  	-webkit-animation: cloudMedium 80s infinite;  	-moz-animation: cloudMedium 80s infinite;  	-o-animation: cloudMedium 80s infinite;  	animation: cloudMedium 80s infinite;  }  .cloud.large {  	z-index: 2;  	top: 5%;  	right: 15%;  	background: url(images/cloudLarge.png) no-repeat no-repeat center;  	height: 169px;  	width: 302px;  	-webkit-animation: cloudLarge 105s infinite;  	-moz-animation: cloudLarge 105s infinite;  	-o-animation: cloudLarge 105s infinite;  	animation: cloudLarge 105s infinite;  }   @keyframes cloudSmall {   0% {   left: -8%;  }   100% {   left: 108%;  }  }   @keyframes cloudMedium {   0% {   left: -8%;  }   100% {   left: 108%;  }  }   @keyframes cloudLarge {   0% {   right: -18%;  }   100% {   right: 118%;  }  }
气球的漂浮

接下来是气球的漂浮,可适当的给予摇摆的动作。

.balloon {  	position: absolute;  	z-index: 3;  	top: 5%;  	right: 20%;  	background: url(images/balloon.png) no-repeat no-repeat center;  	height: 227px;  	width: 157px;  	-webkit-animation: balloon 30s infinite cubic-bezier(0.91, 0.01, 1, 0.89);  	-moz-animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5);  	-o-animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5);  	animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5);  }   @keyframes balloon {   0% {   right: -20%;   transform: rotate(0deg);  }   5% {   right: -20%;   transform: rotate(0deg);  }   25% {   transform: rotate(0deg);  }   100% {   right: 120%;   transform: rotate(-30deg);  }  }

到这里,我们的动画效果基本已经完成了,其中需要添加浏览器前缀的请自行添加。或者下载我们的附件参看完整的css源代码。

三、城市场景组成图片

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

.skyline {  	position: absolute;  	z-index: 5;  	width: 100%;  	bottom: 26%;  	background: url(images/skyline.png) repeat no-repeat;  	height: 147px;  }  .beans {  	position: absolute;  	z-index: 4;  	height: 201px;  	width: 88px;  	bottom: 30%;  	left: 50%;  	background: url(images/beans.png) no-repeat no-repeat;  }  .ground {  	position: absolute;  	width: 100%;  	bottom: 0;  }  .ground.front {  	z-index: 30;  	background: url(images/groundFront.png) repeat no-repeat center;  	height: 301px;  }  .ground.mid {  	z-index: 20;  	background: url(images/groundMid.png) repeat no-repeat;  	height: 299px;  }  .ground.back {  	z-index: 10;  	background: url(images/groundBack.png) repeat no-repeat center;  	height: 281px;  }  .dowEventCenter {  	position: absolute;  	z-index: 12;  	bottom: 20%;  	left: 5%;  	background: url(images/dowEventCenter.png) no-repeat no-repeat center;  	height: 236px;  	width: 524px;  }  .planetarium {  	position: absolute;  	z-index: 12;  	bottom: 18%;  	right: 10%;  	background: url(images/Planetarium.png) no-repeat no-repeat center;  	height: 285px;  	width: 347px;  }  .friendshipShell {  	position: absolute;  	z-index: 21;  	bottom: 18%;  	left: 20%;  	background: url(images/friendshipShell.png) no-repeat no-repeat center;  	height: 370px;  	width: 231px;  }  .glockenspiel {  	position: absolute;  	z-index: 11;  	bottom: 26%;  	right: 50%;  	background: url(images/Glockenspiel.png) no-repeat no-repeat center;  	height: 263px;  	width: 137px;  }

查看预览下载附件

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

转载自:HTML5+CSS3城市场景动画


-- 完 --
weinxin
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送WordPress小技巧,你可以随时退订,欢迎订阅哦~

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5+CSS3城市场景动画
喜欢 (1)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址