css实现日出月落昼夜交替动画效果代码-html代码-BFW代码库

css实现日出月落昼夜交替动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现日出月落昼夜交替动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
@-webkit-keyframes sunrise {
	from {
		transform: rotate(-45deg);
	}

	to {
		transform: rotate(315deg);
	}
}

@keyframes sunrise {
	from {
		transform: rotate(-45deg);
	}

	to {
		transform: rotate(315deg);
	}
}

@-webkit-keyframes moonrise {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(180deg);
	}
}

@keyframes moonrise {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(180deg);
	}
}

@-webkit-keyframes dawn {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
}

@keyframes dawn {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
}

@-webkit-keyframes noon {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
}

@keyframes noon {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
}

@-webkit-keyframes dusk {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
}

@keyframes dusk {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
}

@-webkit-keyframes midnight {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
}

@keyframes midnight {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
}

body {
	--animation-speed: 24s;
	background-color: rgb(37, 29, 24);
}

body.pause {
	--animation-speed: 0;
}

.sky {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	max-height: 600px;
	overflow: hidden;
}

.sky__phase {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transition: opacity 0.2s;
}

.sky__dawn {
	background: linear-gradient(
		0deg,
		rgba(254, 215, 102, 1) 0%,
		rgba(205, 237, 246, 1) 100%
	);
	-webkit-animation: linear dawn infinite var(--animation-speed);
	        animation: linear dawn infinite var(--animation-speed);
}

.sky__noon {
	background: linear-gradient(
		0deg,
		rgba(205, 237, 246, 1) 0%,
		rgba(36, 123, 160, 1) 100%
	);
	-webkit-animation: linear noon infinite var(--animation-speed);
	        animation: linear noon infinite var(--animation-speed);
}

.sky__dusk {
	background: linear-gradient(
		0deg,
		rgba(255, 32, 110, 1) 0%,
		rgba(10, 0, 94, 1) 100%
	);
	-webkit-animation: linear dusk infinite var(--animation-speed);
	        animation: linear dusk infinite var(--animation-speed);
}

.sky__midnight {
	background: linear-gradient(
		0deg,
		rgba(2, 0, 20, 1) 0%,
		rgba(10, 0, 94, 1) 100%
	);
	-webkit-animation: linear midnight infinite var(--animation-speed);
	        animation: linear midnight infinite var(--animation-speed);
}

.orbit {
	position: relative;
	width: 500px;
	height: 500px;
	margin: 200px auto;
	transform: rotate(-45deg);
	-webkit-animation: linear sunrise infinite var(--animation-speed);
	        animation: linear sunrise infinite var(--animation-speed);
.........完整代码请登录后点击上方下载按钮下载查看