首页>案例集

steps animation,极光下奔跑的熊!

有次无意间看到了百度浏览器的动画效果,一直恋恋不忘,终于抽了点空仿了一个场景,感觉steps animation逐帧动画还是很强大呀。

steps animation.jpg点击查看效果

一、案例分析

1、星空背景的运动和三层山的运动需要掌握背景无缝滚动的原理。

2、熊出没的由快到慢的steps动画,六个完步完成,掌握由快到慢的规律。

3、熊快速跑出来后,在原地踏步逐帧动画,通过山的往后运动,形成熊的向前相对运动。

4、极光的运动,通过透明度的变化和极光的间隔出现形成效果。

5、百度浏览器logo的转动效果,也是steps逐帧动画。

二、HTML源代码

<div id="main">
    <div id="stage">
        <div id="space"></div>
        <div id="mountains">
            <div class="mountain mountain-1"></div>
            <div class="mountain mountain-2"></div>
            <div class="mountain mountain-3"></div>
        </div>
        <div id="bear"></div>
        <div id="lights">
            <div class="light light-1"></div>
            <div class="light light-2"></div>
            <div class="light light-3"></div>
            <div class="light light-4"></div>
            <div class="light light-5"></div>
            <div class="light light-6"></div>
            <div class="light light-7"></div>
            <div class="light light-8"></div>
            <div class="light light-9"></div>
            <div class="light light-10"></div>
            <div class="light light-11"></div>
            <div class="light light-12"></div>
            <div class="light light-13"></div>
            <div class="light light-14"></div>
        </div>
    </div>
    <div id="sence">
        <div id="sence-content">
        	<div id="sence-icon">
            	<div id="sence-icon-logo"></div>
            </div>
            <div id="sence-title"></div>
        </div>
    </div>
</div>

三、CSS源代码

body{
	margin:0;}

html,body{
	width:100%;
	height:100%;}
body{
	font:16px "microsoft Yahei";
	background:#464853 url(images/bg-container.png) repeat-x;
	min-width:1000px;
	min-height:550px; }
#main,#stage,#sence{
	width:100%;
	height:100%;
	overflow:hidden;
	}
#main,#stage{
	position:relative;}
#sence{
	position:absolute;
	left:0;
	top:0;}
/*星空背景图,无缝循环播放。*/
#space{
	width:3840px;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background:url(images/bg-space.png) repeat-x;
	animation:moving 450s linear infinite;}
/*整个山的舞台容器,高度是最高的山的背景图片的高度。*/
#mountains{
	width:100%;
	height:17.78125em;
	position:absolute;
	left:0;
	bottom:0;
	overflow:hidden;
	animation:mountains-in 0.8s ease-out forwards;
	}
/*宽高使用了em的倍数关系。1em=16px*/
.mountain{
	width:240em;
	position:absolute;
	left:0;
	bottom:0;
}
/*第一张山的背景图片,无缝拼接滚动。*/
.mountain-1{
	height:10.5em;
	z-index:3;
	background:url(images/bg-mountain-1.png) repeat-x;
	background-size:auto 100%;
	animation:moving 100s linear 0.8s infinite;
	}
.mountain-2{
	height:12em;
	z-index:2;
	background:url(images/bg-mountain-2.png) repeat-x;
	background-size:auto 100%;
	animation:moving 160s linear 0.8s infinite;
	}
.mountain-3{
	height:17.78125em;
	z-index:1;
	background:url(images/bg-mountain-3.png) repeat-x;
	background-size:auto 100%;
	animation:moving 360s linear 0.8s infinite;
	}
/*熊出没*/
#bear{
	position:absolute;
	left:-4%;
	margin-left:-6.25em;
	bottom:40px;
	z-index:10;
	width:6.25em;/*8个熊的宽度是1600,图片缩小为一半,800px,每个熊的宽度是100px,100/16=6.25em;*/
	height:3.125em;
	background:url(images/bear.png) 0 0 no-repeat;
	background-size:50em 100%; /*一个熊的宽度是6.25em,8个熊的宽度是50em*/
	animation:bear-run-in 3.6s step-end 0.6s  forwards,bear-run 0.8s steps(8,end) 4.2s infinite forwards; /*熊快速跑进画面,然后原地踏步。*/
	}
/*熊原地踏步,通过背景的后退感觉熊在前进。*/
#bear.running{
	left:50%;
	animation:bear-run 0.8s steps(8,end) infinite;
	}
/*极光的样式*/
#lights{
	width:68.22222em;
	height:37.38888em;
	position:absolute;
	left:50%;
	margin-left:-34.11111em;
	top:0;
	}
.light{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	opacity:0;}
/*极光的规律就是透明度的变化,运动时间为7s,每张图片的间隔是0.5s,所以要连贯起来,需要至少14张图片。*/
.light-1{
	background:url(images/bg-aurora-1.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 0.2s infinite;}
.light-2{
	background:url(images/bg-aurora-2.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 0.7s infinite;}
.light-3{
	background:url(images/bg-aurora-3.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 1.2s infinite;}
.light-4{
	background:url(images/bg-aurora-4.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 1.7s infinite;}
.light-5{
	background:url(images/bg-aurora-5.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 2.2s infinite;}
.light-6{
	background:url(images/bg-aurora-4.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 2.7s infinite;}
.light-7{
	background:url(images/bg-aurora-3.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 3.2s infinite;}
.light-8{
	background:url(images/bg-aurora-2.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 3.7s infinite;}
.light-9{
	background:url(images/bg-aurora-1.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 4.2s infinite;}
.light-10{
	background:url(images/bg-aurora-2.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 4.5s infinite;}
.light-11{
	background:url(images/bg-aurora-3.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 5.2s infinite;}
.light-12{
	background:url(images/bg-aurora-4.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 5.7s infinite;}
.light-13{
	background:url(images/bg-aurora-5.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 6.2s infinite;}
.light-14{
	background:url(images/bg-aurora-4.png) no-repeat;
	background-size:100% auto;
	animation:lights 7s linear 6.7s infinite;}
/*场景样式*/

#sence-content{
	width:16em;
	position:absolute;
	left:50%;
	top:50%;
	margin:-5em 0 0 -8em;
	opacity:0;
	animation:logo 0.4s ease-in 0.2s forwards;
	}
#sence-icon{
	width:7em;
	height:7em;
	position:relative;
	margin:0 auto 1em;
	}
#sence-icon-logo{
	width:100%;
	height:100%;
	background:url(images/bg-logo-long.png) no-repeat;
	background-size:168em 7em;
	animation:icon 1.6s steps(23,end) 0.8s  forwards;/*有24个步骤图片,但是加上forwards后,只能设置23步骤,最后一步要保持最后状态不变,否则图片会消失。*/}
#sence-title{
	height:4.444em;
	width:13.204em;
	background:url(images/bg-title.png) no-repeat;
	background-size:100%;
	margin:0 auto 1em ;
	}
@keyframes icon{
	0%{
		background-position:0em 0em;}
	100%{
		background-position:-161em 0;
		}}
@keyframes logo{
	0%{
		opacity:0;
		transform:translateY(0);}
	100%{
		opacity:1;
		transform:translateY(-50%);
		}
	}	

@keyframes lights{
	0%{
		opacity:0;}
	14%{
		opacity:1;}
	28%{
		opacity:0;}
	100%{
		opacity:0;}
	}
@keyframes moving{
	0%{
		transform:translateX(0);}
	100%{
		transform:translateX(-50%);}}
@keyframes mountains-in{
	0%{
		opacity:0;
		transform:scale(1.5);
		}
	100%{
		opacity:1;
		transform:scale(1);}}
@keyframes bear-run-in{
  /*第一个完步,时间间隔1.38888889%,图片间隔一个熊,位置间隔1.75%*/	
  0% {
    background-position: 0em 0;
    left: -4%;
  }
  1.38888889% {
    background-position: -6.25em 0;
    left: -2.25%;
  }
  2.77777778% {
    background-position: -12.5em 0;
    left: -0.5%;
  }
  4.16666667% {
    background-position: -18.75em 0;
    left: 1.25%;
  }
  5.55555556% {
    background-position: -25em 0;
    left: 3%;
  }
  6.94444444% {
    background-position: -31.25em 0;
    left: 4.75%;
  }
  8.33333333% {
    background-position: -37.5em 0;
    left: 6.5%;
  }
  9.72222222% {
    background-position: -43.75em 0;
    left: 8.25%;
  }
  11.11111111% {
    background-position: -50em 0;
    left: 10%;
  }
  /*第二个完步开始,时间间隔1.66666667%,间隔一个熊,位置间隔1.5%。速度比第一个完步慢。*/
  11.11111111% {
    background-position: 0em 0;
    left: 10%;
  }
  12.77777778% {
    background-position: -6.25em 0;
    left: 11.5%;
  }
  14.44444444% {
    background-position: -12.5em 0;
    left: 13%;
  }
  16.11111111% {
    background-position: -18.75em 0;
    left: 14.5%;
  }
  17.77777778% {
    background-position: -25em 0;
    left: 16%;
  }
  19.44444444% {
    background-position: -31.25em 0;
    left: 17.5%;
  }
  21.11111111% {
    background-position: -37.5em 0;
    left: 19%;
  }
  22.77777778% {
    background-position: -43.75em 0;
    left: 20.5%;
  }
  24.44444444% {
    background-position: -50em 0;
    left: 22%;
  }
  /*第三个完步开始,时间间隔1.94444444%,间隔一个熊,位置间隔1.25%。速度比第二个完步慢。*/
  24.44444444% {
    background-position: 0em 0;
    left: 22%;
  }
  26.38888889% {
    background-position: -6.25em 0;
    left: 23.25%;
  }
  28.33333333% {
    background-position: -12.5em 0;
    left: 24.5%;
  }
  30.27777778% {
    background-position: -18.75em 0;
    left: 25.75%;
  }
  32.22222222% {
    background-position: -25em 0;
    left: 27%;
  }
  34.16666667% {
    background-position: -31.25em 0;
    left: 28.25%;
  }
  36.11111111% {
    background-position: -37.5em 0;
    left: 29.5%;
  }
  38.05555556% {
    background-position: -43.75em 0;
    left: 30.75%;
  }
  40% {
    background-position: -50em 0;
    left: 32%;
  }
  /*第四个完步开始,时间间隔2.22222222%,间隔一个熊,位置间隔1%。速度比第三个完步慢。*/
  40% {
    background-position: 0em 0;
    left: 32%;
  }
  42.22222222% {
    background-position: -6.25em 0;
    left: 33%;
  }
  44.44444444% {
    background-position: -12.5em 0;
    left: 34%;
  }
  46.66666667% {
    background-position: -18.75em 0;
    left: 35%;
  }
  48.88888889% {
    background-position: -25em 0;
    left: 36%;
  }
  51.11111111% {
    background-position: -31.25em 0;
    left: 37%;
  }
  53.33333333% {
    background-position: -37.5em 0;
    left: 38%;
  }
  55.55555556% {
    background-position: -43.75em 0;
    left: 39%;
  }
  57.77777778% {
    background-position: -50em 0;
    left: 40%;
  }
  /*第五个完步开始,时间间隔2.5%,间隔一个熊,位置间隔0.75%。速度比第四个完步慢。*/
  57.77777778% {
    background-position: 0em 0;
    left: 40%;
  }
  60.27777778% {
    background-position: -6.25em 0;
    left: 40.75%;
  }
  62.77777778% {
    background-position: -12.5em 0;
    left: 41.5%;
  }
  65.27777778% {
    background-position: -18.75em 0;
    left: 42.25%;
  }
  67.77777778% {
    background-position: -25em 0;
    left: 43%;
  }
  70.27777778% {
    background-position: -31.25em 0;
    left: 43.75%;
  }
  72.77777778% {
    background-position: -37.5em 0;
    left: 44.5%;
  }
  75.27777778% {
    background-position: -43.75em 0;
    left: 45.25%;
  }
  77.77777778% {
    background-position: -50em 0;
    left: 46%;
  }
  /*第六个完步开始,时间间隔逐步增多2.77777776%,2.77777777%等,间隔一个熊,位置间隔0.5%。速度比第五个完步慢。逐步慢下来*/
  77.77777778% {
    background-position: 0em 0;
    left: 46%;
  }
  80.55555556% {
    background-position: -6.25em 0;
    left: 46.5%;
  }
  83.33333333% {
    background-position: -12.5em 0;
    left: 47%;
  }
  86.11111111% {
    background-position: -18.75em 0;
    left: 47.5%;
  }
  88.88888889% {
    background-position: -25em 0;
    left: 48%;
  }
  91.66666667% {
    background-position: -31.25em 0;
    left: 48.5%;
  }
  94.44444444% {
    background-position: -37.5em 0;
    left: 49%;
  }
  97.22222222% {
    background-position: -43.75em 0;
    left: 49.5%;
  }
  100% {
    background-position: -50em 0;
    left: 50%;
  }
}
@keyframes bear-run{
	0%{
		background-position: 0em 0;
    
		}
	100%{
		background-position: -50em 0;
    }
	}

/*通过em倍数关系设置对象大小,根据屏幕大小设置不同的文字大小,从而改变对象的宽高。*/	
@media screen and (max-height:500px){
	body{
		font-size:14px;
	}
	}
@media screen and (min-width:1280px){
	body{
		font-size:16px;
	}
@media screen and (min-width:1440px){
	body{
		font-size:18px;
	}
@media screen and (min-width:1600px){
	body{
		font-size:22px;
	}
@media screen and (min-width:1920px){
	body{
		font-size:24px;
	}	
	}

四、JavaScript源代码

window.onload=function(){
	var oBear=document.getElementById("bear");
	setTimeout(running,5000);//延迟5秒,加载一个class为running。
	function running(){
		oBear.className="running";
		}
	}

弄了二个下午,终于搞定,改天好好写一个steps animation的教程,感觉还是有点难度的。

又是愉快的周末,嗨起来!

源代码下载地址:

声明:坚持了三年的原创web前端教程网站,以为可以一直随心所欲的写下去。网站的虚拟主机和域名钱,一年大概二三百,我负担得起。可惜随着用户访问量的不断增加,阿里云每个月提供的免费流量已经不够了(用户访问网站,需要从阿里云服务器下载网页,要耗费阿里云主机的流量),需要我花钱从阿里云买流量,网站才能继续访问,这个钱一年至少一千多,我不想接广告,只能靠添加打赏插件和下载一些案例需要付费的方式补贴一点流量的钱。特此声明!

原创比抄袭难多了,请多多支持!
打赏

点赞


11
保存到:

相关文章

Top