html5+css制作日出效果

时间：2015-04-09 09:22:23 　来源：免费模板网　作者：风雪　阅读次数　tagscss效果

随着前端的进度，html衍生到html5 样式css变到css3等，今天学习的是html5+css制作日出效果一个CSS3日出特效，CSS3主要是HTML里的技术，因此现在的IE8并不支持，所以请使用火狐或Chrome等浏览器测试。　　HTML5日月星辰变换效果，是不是很炫？想学习HTML5的朋友可以看一些HTML5的相关语义，通过努力你也可以做出很棒的效果。注意浏览器兼容效果

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 日出</title>
<style>
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}

#container {
	width: 1080px;
	margin: 0 auto;
	overflow: hidden;
	padding: 50px 20px 0 20px;
}

h1 {
		font-size: 30px;
		padding: 0 0 20px 0;
	}
	
	h1 span {
		font-size: 18px;
	}

#left {
		overflow: hidden;
		float: left;
	}
	
		#left p {
			width: 470px;
			padding: 20px 0 0 0;
			font-family: Arial, Helvetica, sans-serif;
		}

#sky {
	width: 500px;
	height: 500px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: #525252;
}

#sky.animate {
	-webkit-animation-name: sky;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;	
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

-moz-animation-name: sky;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;	
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: sky;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;	
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;

animation-name: sky;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;

}

@-webkit-keyframes sky {

0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

66% {
		background-color: #6293e5;
	}

100% {
		background-color: #525252;
	}

}

@-moz-keyframes sky {

0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

66% {
		background-color: #6293e5;
	}

100% {
		background-color: #525252;
	}

}

@-ms-keyframes sky {

0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

66% {
		background-color: #6293e5;
	}

100% {
		background-color: #525252;
	}

}

@keyframes sky {

0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

66% {
		background-color: #6293e5;
	}

100% {
		background-color: #525252;
	}

}

#ground {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 500px;
	height: 154px;
	background: #6c5228;
	z-index: 4;
}

#ground.animate {
	-webkit-animation-name: ground;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;	
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

-moz-animation-name: ground;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;	
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: ground;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;	
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;

animation-name: ground;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes ground {

0% {
		background: #6c5228;
	}
	
	33% {
		background: #48a037;
	}

66% {
		background: #48a037;
	}

100% {
		background: #6c5228;
	}

}

@-moz-keyframes ground {

0% {
		background: #6c5228;
	}
	
	33% {
		background: #48a037;
	}

66% {
		background: #48a037;
	}

100% {
		background: #6c5228;
	}

}

@-ms-keyframes ground {

0% {
		background: #6c5228;
	}
	
	33% {
		background: #48a037;
	}

66% {
		background: #48a037;
	}

100% {
		background: #6c5228;
	}

}

@keyframes ground {

0% {
		background: #6c5228;
	}
	
	33% {
		background: #48a037;
	}

66% {
		background: #48a037;
	}

100% {
		background: #6c5228;
	}

}

#sun {
	background: #ffd630;
	width: 130px;
	height: 130px;
	position: absolute;
	border-radius: 70px;
	z-index: 2;
	bottom: 0;
	left: 340px;
}

#sun.animate {
	-webkit-animation-name: sunrise;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;	
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

-moz-animation-name: sunrise;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;	
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: sunrise;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;	
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes sunrise {

0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

66% {
		bottom: 340px;
		left: 40px;		
		background: #ffd630;
	}

100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}

@-moz-keyframes sunrise {

0% {
		bottom: 0;
		left: 340px;
		background: #f00;
		
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}

100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}

@-ms-keyframes sunrise {

0% {
		bottom: 0;
		left: 340px;
		background: #f00;
		
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}

100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}

@keyframes sunrise {

0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}

100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}

#cloud {
	position: relative;
	top: 50px;
	left: -100px;
	opacity: 0;
	z-index: 3;
}

#cloud.animate {
	-webkit-animation-name: cloud;
	-webkit-animation-duration: 12s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;	
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

-moz-animation-name: cloud;
	-moz-animation-duration: 12s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;	
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: cloud;
	-ms-animation-duration: 12s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;	
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;

animation-name: cloud;
	animation-duration: 12s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes cloud {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 1;
		left: 60px;
	}
	
	75% {
		opacity: 1;
		left: 100px;
	}
	
	100% {
		opacity: 0;
		left: 500px;
	}

}

@-moz-keyframes cloud {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 1;
		left: 60px;
	}
	
	75% {
		opacity: 1;
		left: 100px;
	}
	
	100% {
		opacity: 0;
		left: 500px;
	}

}

@-ms-keyframes cloud {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 1;
		left: 60px;
	}
	
	75% {
		opacity: 1;
		left: 100px;
	}
	
	100% {
		opacity: 0;
		left: 500px;
	}

}

@keyframes cloud {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 1;
		left: 60px;
	}
	
	75% {
		opacity: 1;
		left: 100px;
	}
	
	100% {
		opacity: 0;
		left: 500px;
	}

}

.cloud {
	border-radius: 90px / 30px;
	width: 160px;
	height: 50px;
	background: #fff;
	position: absolute;
	top: 10px;
}

.cloud-2 {
	left: 50px;
	top: 0;
}

.cloud-3 {
	left: 110px;
	top: 20px;

}

#moon {
	position: relative;
	opacity: 0;
	top: 50px;
	left: -100px;
}

#moon.animate {
	-webkit-animation-name: moon;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

-moz-animation-name: moon;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: moon;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;

animation-name: moon;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes moon {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 0;
		left: -100px;
	}
	
	90% {
		opacity: 0;
		left: -100px;
	}
	
	100% {
		opacity: 1;
		left: 50px;
	}

}

@-moz-keyframes moon {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 0;
		left: -100px;
	}
	
	90% {
		opacity: 0;
		left: -100px;
	}
	
	100% {
		opacity: 1;
		left: 50px;
	}

}

@-ms-keyframes moon {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 0;
		left: -100px;
	}
	
	90% {
		opacity: 0;
		left: -100px;
	}
	
	100% {
		opacity: 1;
		left: 50px;
	}

}

@keyframes moon {

0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 0;
		left: -100px;
	}
	
	90% {
		opacity: 0;
		left: -100px;
	}
	
	100% {
		opacity: 1;
		left: 50px;
	}

}

.moon {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		background: #fff;
		position: absolute;
	}
	
	.moon-2 {
		background: #525252;
		position: absolute;
		top: -20px;
		left: 20px;
	}

#code {
	float: left;
	margin: 0 0 0 20px;
	width: 494px;
}

ul.headers {
	overflow: hidden;
}

ul.headers li {
		float: left;
		width: 85px;
		border: dashed 1px #ccc;
		margin: 0 4px;
	}

ul.headers li a {
		display: block;
		text-decoration: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-align: center;
		padding: 10px;
	}
	
	ul.headers li a:hover, ul.headers li a:active {
		background: #ccc;
		color: #fff;
	}

#tab_content {
	border: #ccc 1px dashed;
	margin: 20px 0 20px 3px;
	padding: 0 0 20px 10px;
	width: 456px;	
}

div.tab {
	font-family: Arial, Helvetica, sans-serif;
	margin: 30px 0 0 10px;
}

div.tab pre {
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
}

input[type="button"] {
	margin: 20px 0 0 165px;
	padding: 5px;
}
</style>
</head>
<body style="width: 98%;">
<div id="container">
	<h1>A Simple Scene Animated with CSS3 <span>(requires Chrome, Safari, Firefox 5+, or IE10 PP3)</span></h1>
	<div id="left">
		<div id="sky" class="target">
			<div id="cloud" class="target">
				<div class="cloud cloud-1"></div>
				<div class="cloud cloud-2"></div>
				<div class="cloud cloud-3"></div>
			</div>
			<div id="sun" class="target"></div>
			<div id="moon" class="target">
				<div class="moon">
				</div>
				<div class="moon moon-2">
				</div>
			</div>
			<div id="ground" class="target"></div>
		</div>
		<input type="button" value="点击我" id="startbutton">
	</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function () {
	var s = null,

AnimationSpace = {
		settings: {
			tabHeaders: null,
			tabSections: null,
			currentIndex: null,
			speed: 800,
			collection: null,
			i: null,
			j: null,
			startButton: $("#startbutton")
		},

init: function () {
			s = this.settings;
			s.tabSections = $("div.tab");
			$(s.tabSections[0]).slideDown(s.speed);
			$(s.tabSections[1]).slideUp(s.speed);
			$(s.tabSections[2]).slideUp(s.speed);
			$(s.tabSections[3]).slideUp(s.speed);
			$(s.tabSections[4]).slideUp(s.speed);
			this.getClickedTab();
			this.startAnimation();
		},
	
		getClickedTab: function () {
			s = this.settings;
			s.tabHeaders = $("#sidebar_tabs ul.headers a");
			s.collection = $("#tab_content div.tab");
			$(s.tabHeaders).click(function () {
				s.currentIndex = $(this).parent().index();
				for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) {
					if (s.i !== s.currentIndex) {
						$(s.tabSections[s.i]).slideUp(s.speed);

} else {
						$(s.tabSections[s.i]).slideDown(s.speed);
					}
				}
				return false;
			});
		},
		startAnimation: function () {
			s = this.settings;
			
			s.startButton.click(function() {
				$("div.target").toggleClass("animate");
				if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
					s.startButton.attr("value", "RESET THE ANIMATION");
				} else {
					s.startButton.attr("value", "ANIMATE THE SCENE");	
				}
			});
		}

};

AnimationSpace.init();
});
</script>
</body>
</html>

上篇：html5制作海洋背景

下篇：css代码生成器之背景透明内容不透明

本文地址：https://www.freemoban.com/bjrm/2015/0409/1283.html

猜你喜欢