CSS3日出特效-HTML5日月星辰变换

2020-01-27 14:17:19

字体：大中小

来源：转载

供稿：网友

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

上一篇：背景透明，内容不透明CSS代码生成器

下一篇：HTML5蓝色海洋