div+css布局实现宇航员月球行走动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css布局实现宇航员月球行走动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
        	margin: 0;
        	padding: 0;
        	width: 100vw;
        	height: 100vh;
        	background: #080808;
        	overflow: hidden;
        	background-image: radial-gradient(1px 1px at 5% 98%, #ffffff, #fff0),
        		radial-gradient(1px 1px at 18% 79%, #ffffff, #fff0),
        		radial-gradient(2px 1px at 26% 52%, #ffffff, #fff0),
        		radial-gradient(1px 2px at 31% 20%, #e6e6e6, #fff0),
        		radial-gradient(1px 1px at 41% 44%, #e8e8e8, #fff0),
        		radial-gradient(1px 2px at 47% 6%, #ffffff, #fff0),
        		radial-gradient(1px 1px at 50% 71%, #f5f5f5, #fff0),
        		radial-gradient(2px 1px at 65% 50%, #e2e2e2, #fff0),
        		radial-gradient(1px 1px at 54% 26%, #ffffff, #fff0),
        		radial-gradient(2px 2px at 76% 34%, #efefef, #fff0),
        		radial-gradient(1px 1px at 10% 32%, #ececec, #fff0),
        		radial-gradient(1px 2px at 84% 60%, #ffffff, #fff0),
        		radial-gradient(1px 1px at 87% 13%, #eaeaea, #fff0),
        		radial-gradient(1px 1px at 69% 21%, #efefef, #fff0),
        		radial-gradient(1px 2px at 62% 83%, #efefef, #fff0),
        		radial-gradient(2px 1px at 81% 74%, #efefef, #fff0),
        		radial-gradient(1px 1px at 36% 62%, #efefef, #fff0),
        		radial-gradient(1px 1px at 94% 68%, #efefef, #fff0),
        		radial-gradient(2px 1px at 98% 50%, #efefef, #fff0),
        		radial-gradient(1px 1px at 95% 21%, #efefef, #fff0),
        		linear-gradient(45deg, #000 5%, #000313 65%, #111 100%);
        	background-repeat: repeat;
        	background-size: 25% 25%, 33.33% 33.33%, 50% 50%, 20% 20%, 33.33% 33.33%,
        		25% 18%, 33.33% 19%, 33.33% 21%, 23% 27%, 27.33% 35.33%, 18.33% 32.33%,
        		28.33% 34.33%, 33.33% 30.33%, 25.33% 29.33%, 29.33% 31.33%, 20.33% 29.33%,
        		30.33% 27.33%, 22.33% 33.33%, 15.33% 32.33%, 33.33% 22.33%, 100% 100%;
        }
        
        *:before,
        *:after {
        	content: "";
        	position: absolute;
        }
        
        body::before {
        	width: 15vmax;
        	height: 15vmax;
        	background: radial-gradient(circle at 50% 100%, #000 0 50%, #fff0),
        		radial-gradient(circle at 121% 39%, green 0 18%, #fff0 20%),
        		radial-gradient(ellipse at 111% 26%, green 0 18%, #fff0 20%),
        		radial-gradient(ellipse at 100% 15%, green 0 18%, #fff0 20%),
        		radial-gradient(circle at 38% -15%, #ffffffb3 0 16%, #fff0 20%),
        		radial-gradient(circle at 50% 100%, #000 0 50%, #008eff);
        	border-radius: 100%;
        	left: 10vmax;
        	top: 10vmax;
        	box-shadow: 0 -0.5vmax 1vmax -0.25vmax #9999ff45;
        }
        
        .moon {
        	position: absolute;
        	width: 250vmax;
        	height: 100vmax;
        	z-index: 1;
        	border-radius: 100%;
        	background: radial-gradient(
        			circle at 50% 50%,
        			#fdfdfd 0% 5vmax,
        			#ffffff00 10vmax 100%
        		),
        		#fff;
        	box-shadow: 0 0 10vmax 1vmax #6493a9, 0 0 5vmax 5vmax #adadad80 inset,
        		0 0 2vmax 1vmax #fdfdfd;
        	left: calc(50% - 125vmax);
        	top: 45vmax;
        }
        
        .moon:before {
        	content: "";
        	background: radial-gradient(
        		circle at 100% 60%,
        		#ffffff00 0% 60%,
        		#dddddd 75% 100%
        	);
        	width: 100%;
        	height: 100%;
        	position: absolute;
        	top: 0%;
        	left: 0%;
        	border-radius: 100%;
        }
        
        .crater {
        	content: "";
        	position: absolute;
        	width: 25vmax;
        	height: 20vmax;
        	border-radius: 100%;
        	transform: rotateX(50deg) rotateY(-10deg) rotateZ(15deg);
        	border: 1px dotted #404040;
        	background: linear-gradient(225deg, #000000, #eaeaea99);
        	box-shadow: 0 0 3vmax 1vmax #585858, 0 0 0.5vmax 0.5vmax #5d5d5d,
        		2vmax 5vmax 5.5vmax 3.5vmax #484848, 0 0 5vmax 0.5vmax #444444,
        		1vmax 3.5vmax 1.5vmax 0.5vmax #ababab;
        	left: calc(50% - 25vmax);
        	opacity: 0.35;
        	bottom: calc(50% + 25vmax);
        }
        
        .astronaut {
        	width: 20vmax;
        	height: 30vmax;
        	right: -22%;
        	position: absolute;
        	top: 30vmax;
        	z-index: 2;
        	background-size: 100%;
        	background-position: center top;
        	/*transform: scale(2);*/
        	animation: walk 20s cubic-bezier(0.05, -0.01, 0.61, 0.99) 0s infinite,
        		walk-up 5s cubic-bezier(0.35, 0.14, 1, 1) 1.5s infinite;
        	margin-top: -10%;
        }
        
        @keyframes walk {
        	0% {
        		right: -20%;
        	}
        	20% {
        		right: 10%;
        	}
        	45% {
        		right: 40%;
        	}
        	70% {
        		right: 70%;
        	}
        	100% {
        		right: 100%;
        	}
        }
        
        @keyframes walk-up {
        	0%,
        	100% {
        		top: 30vmax;
        	}
        	10%,
        	90% {
        		top: 31vmax;
        	}
        	50% {
        		top: 35vmax;
        	}
        }
        
        .astronaut * {
        	position: absolute;
        }
        
        .backpack {
        	background: linear-gradient(
        		91deg,
        		#343535 0% 55%,
        		#4b4e50 58% 75%,
        		#6e7071 77% 88%,
        		#c6c6c6 92% 100%
        	);
        	width: 30%;
        	height: 38%;
        	left: 57%;
        	top: 20%;
        	border-radius: 10% 17% 60% 10%;
        	border-top: 0.2vmax solid #4b4e50;
        }
        
        .head {
        	background: #b8b8b8;
        	width: 46%;
        	height: 27%;
        	border-radius: 50%;
        	left: 31%;
        	top: 4%;
        	/* opacity: 0.5; */
        	border-bottom: 1vmax solid #9b9b9b;
        	transform: rotate(-4deg);
        	z-index: 3;
        }
        
        .head:before {
        	/*background: #8bc34a85; */
        	width: 75%;
        	height: 69%;
        	border-radius: 50% 50% 0 0;
        	left: 9%;
        	top: 3%;
        	border-top: 0.65vmax solid #c6c6c6;
        	border-right: 0.15vmax solid transparent;
        	border-left: 0.15vmax solid transparent;
        	transform: rotate(9deg);
        }
        
        .head:after {
        	background: radial-gradient(
        		circle at 45% 25%,
        		#2b2b2b 0 57%,
        		#252525 58% 100%
        	);
        	width: 80%;
        	height: 83%;
        	border-radius: 50%;
        	left: 5%;
        	top: 13%;
        	border: 0.25vmax solid #000;
        	box-sizing: border-box;
        }
        
        .helmet {
        	background: radial-gradient(circle at 8% 33%, #343434 0 5%, #fff0 6% 100%),
        		radial-gradient(circle at 94% 42%, #343434 0 5%, #fff0 6% 100%),
        		radial-gradient(circle at 25% 75%, #2b2b2b 0 35%, #fff0 36% 100%),
        		radial-gradien.........完整代码请登录后点击上方下载按钮下载查看