首页 正文

利用css3制作的一段动画

       1067      2017-12-03    

大家可以看到我的博客上的开头动画了吧。其实他是用css做出来的。在这里给大家分享一下他的代码。无需用js和flash

首先是他的html代码

	<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>

很简单的几行

接下来就是css代码了。基本都是用keyframes和animation做的，代码一看就懂

/*-------- 天空背景以及动画 --------*/
.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;
}
 @-webkit-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;
}
}
 @-moz-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;
}
}
@-o-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;
}
}
 @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: 9;
	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;
}
 @-webkit-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;
}
}
 @-moz-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;
}
}
 @-o-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;
}
}
 @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;
}
 @-webkit-keyframes rotation {
 0% {
 -webkit-transform: rotate(45deg);
}
 100% {
 -webkit-transform: rotate(405deg);
}
}
 @-moz-keyframes rotation {
 0% {
 -moz-transform: rotate(45deg);
}
 100% {
 -moz-transform: rotate(405deg);
}
}
 @-o-keyframes rotation {
 0% {
 -o-transform: rotate(45deg);
}
 100% {
 -o-transform: rotate(405deg);
}
}
 @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(/static/img/bannerflash/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(/static/img/bannerflash/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(/static/img/bannerflash/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;
}
 @-webkit-keyframes cloudSmall {
 0% {
 left: -8%;
}
 100% {
 left: 108%;
}
}
 @-moz-keyframes cloudSmall {
 0% {
 left: -5%;
}
 100% {
 left: 105%;
}
}
 @-o-keyframes cloudSmall {
 0% {
 left: -5%;
}
 100% {
 left: 105%;
}
}
 @keyframes cloudSmall {
 0% {
 left: -5%;
}
 100% {
 left: 105%;
}
}
 @-webkit-keyframes cloudMedium {
 0% {
 left: -8%;
}
 100% {
 left: 108%;
}
}
 @-moz-keyframes cloudMedium {
 0% {
 left: -8%;
}
 100% {
 left: 108%;
}
}
 @-o-keyframes cloudMedium {
 0% {
 left: -8%;
}
 100% {
 left: 108%;
}
}
 @keyframes cloudMedium {
 0% {
 left: -8%;
}
 100% {
 left: 108%;
}
}
 @-webkit-keyframes cloudLarge {
 0% {
 right: -18%;
}
 100% {
 right: 118%;
}
}
 @-moz-keyframes cloudLarge {
 0% {
 right: -18%;
}
 100% {
 right: 118%;
}
}
 @-o-keyframes cloudLarge {
 0% {
 right: -18%;
}
 100% {
 right: 118%;
}
}
 @keyframes cloudLarge {
 0% {
 right: -18%;
}
 100% {
 right: 118%;
}
}
/*-------- 气球以及动画 --------*/
.balloon {
	position: absolute;
	z-index: 3;
	top: 5%;
	right: 20%;
	background: url(/static/img/bannerflash/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);
}
 @-webkit-keyframes balloon {
 0% {
 right: -20%;
 -webkit-transform: rotate(0deg);
}
 5% {
 right: -20%;
 -webkit-transform: rotate(0deg);
}
 25% {
 -webkit-transform: rotate(0deg);
}
 100% {
 right: 120%;
 -webkit-transform: rotate(-30deg);
}
}
 @-moz-keyframes balloon {
 0% {
 right: -20%;
 -moz-transform: rotate(0deg);
}
 5% {
 right: -20%;
 -moz-transform: rotate(0deg);
}
 25% {
 -moz-transform: rotate(0deg);
}
 100% {
 right: 120%;
 -moz-transform: rotate(-30deg);
}
}
 @-o-keyframes balloon {
 0% {
 right: -20%;
 -o-transform: rotate(0deg);
}
 5% {
 right: -20%;
 -o-transform: rotate(0deg);
}
 25% {
 -o-transform: rotate(0deg);
}
 100% {
 right: 120%;
 -o-transform: rotate(-30deg);
}
}
 @keyframes balloon {
 0% {
 right: -20%;
 transform: rotate(0deg);
}
 5% {
 right: -20%;
 transform: rotate(0deg);
}
 25% {
 transform: rotate(0deg);
}
 100% {
 right: 120%;
 transform: rotate(-30deg);
}
}
/*-------- 场景组件 --------*/
.skyline {
	position: absolute;
	z-index: 5;
	width: 100%;
	bottom: 26%;
	background: url(/static/img/bannerflash/skyline.png) repeat no-repeat;
	height: 147px;
}
.beans {
	position: absolute;
	z-index: 4;
	height: 201px;
	width: 88px;
	bottom: 30%;
	left: 50%;
	background: url(/static/img/bannerflash/beans.png) no-repeat no-repeat;
}
.ground {
	position: absolute;
	width: 100%;
	bottom: 0;
}
.ground.front {
	z-index: 30;
	background: url(/static/img/bannerflash/groundFront.png) repeat no-repeat center;
	height: 301px;
}
.ground.mid {
	z-index: 20;
	background: url(/static/img/bannerflash/groundMid.png) repeat no-repeat;
	height: 299px;
}
.ground.back {
	z-index: 10;
	background: url(/static/img/bannerflash/groundBack.png) repeat no-repeat center;
	height: 281px;
}
.dowEventCenter {
	position: absolute;
	z-index: 12;
	bottom: 20%;
	left: 5%;
	background: url(/static/img/bannerflash/dowEventCenter.png) no-repeat no-repeat center;
	height: 236px;
	width: 524px;
}
.planetarium {
	position: absolute;
	z-index: 12;
	bottom: 18%;
	right: 10%;
	background: url(/static/img/bannerflash/Planetarium.png) no-repeat no-repeat center;
	height: 285px;
	width: 347px;
}
.friendshipShell {
	position: absolute;
	z-index: 21;
	bottom: 18%;
	left: 20%;
	background: url(/static/img/bannerflash/friendshipShell.png) no-repeat no-repeat center;
	height: 370px;
	width: 231px;
}
.glockenspiel {
	position: absolute;
	z-index: 11;
	bottom: 26%;
	right: 50%;
	background: url(/static/img/bannerflash/Glockenspiel.png) no-repeat no-repeat center;
	height: 263px;
	width: 137px;
}


版权声明：本文为博主原创文章，未经博主允许不得转载。

我要打赏
如果你觉得本站做的不错
欢迎打赏^o^
最近文章

© 2019 www.itmin.cn SOHENK present

粤ICP备14040917号