css实现火星探测器飞行动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现火星探测器飞行动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
/*** DRONE UPDATED ***/
/*** debugging background landscape ***/

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	perspective: 100vmin;
	overflow: hidden;
}

body * {
	box-sizing: border-box;
	outline: none;
	transition: all 0.5s ease 0s;
}

.container {
	position: fixed;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	overflow: hidden;
}

input[type="checkbox"] {
	position: absolute;
	left: 50%;
	top: 0;
	display: none;
}

label {
	position: absolute;
	bottom: 10vmin;
	right: 5vmin;
	background: red;
	padding: 0.2vmin;
	background-color: #949494;
	box-shadow: 0px 0px 2px 5px #171717, 0px 0px 5px 5px #171717 inset;
	cursor: pointer;
	z-index: 1;
}

label:before,
label:after {
	content: "ON";
	position: absolute;
	font-family: Arial, Helvetica, serif;
	font-weight: bold;
	top: -5vmin;
	left: 0vmin;
	text-shadow: -1px -1px 0 #00000060;
	color: #ffffff0d;
	font-size: 3.5vmin;
	width: 100%;
	text-align: center;
}

label:after {
	content: "OFF";
	top: inherit;
	bottom: -5.5vmin;
	color: #ff000080;
	text-shadow: 0px 0px 10px #ff0000, 0px 0px 2px #ff0000;
}

#switch:checked + label:before {
	color: #00e000;
	text-shadow: 0px 0px 10px #00ff00, 0px 0px 2px #00ff00;
}
#switch:checked + label:after {
	text-shadow: -1px -1px 0 #00000059;
	color: #ffffff0d;
}

span.txt-on,
span.txt-off {
	width: 100%;
	height: 8vmin;
	float: left;
	display: block;
	text-align: center;
	background: #b51e1e;
	box-sizing: border-box;
	box-shadow: 0 0vmin 1vmin 0 #000 inset;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.5s ease 0s;
	border-top: 0 solid #0d310f;
	border-bottom: 0 solid #4a1111;
	min-width: 4vmin;
	color: #ffffffb3;
	font-family: Arial, Helvetica, serif;
	text-shadow: -1px -1px 0 #0000004a;
	border-radius: 2px 2px 0 0;
	font-size: 3vmin;
}
span.txt-on {
	border-top: 1vmin solid #4a1111;
}

#switch:checked + label .txt-on {
	border-top: 0;
	background: #00c300;
	transition: all 0.5s ease 0s;
}

#switch:checked + label .txt-off {
	border-bottom: 1vmin solid #0d310f;
	background: green;
	transition: all 0.5s ease 0s;
}

span.txt-off {
	background: #e02323;
	border-radius: 0 0 2px 2px;
}

/*** INGENUITY ***/

.ingenuity {
	width: 30vmin;
	height: 30vmin;
	position: absolute;
	perspective: 100vmin;
	transform: rotateX(0deg) rotateY(-5deg);
	transform-style: preserve-3d;
	bottom: 15vmin;
	animation: landing 1s ease-in 0s 1;
	/*background: #ff00005c;*/
	perspective-origin: top;
}

.ingenuity:before {
	content: "";
	/*background: #4caf5087;*/
	width: 100%;
	height: 100%;
	position: absolute;
	transform: rotateX(90deg) translate3d(0vmin, 0vmin, -15vmin);
}
.ingenuity:after {
	content: "";
	/*background: #673ab76b;*/
	width: 100%;
	height: 100%;
	position: absolute;
	transform: rotateX(0deg) translate3d(0vmin, 0vmin, -15vmin);
}

#switch:checked ~ .ingenuity {
	animation: takeoff 1s ease 0s 1, flight 1s ease 1s infinite alternate;
}

@keyframes takeoff {
	0% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(0);
	}
	100% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-50vmin);
	}
}

@keyframes flight {
	0% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-50vmin) translateX(0vmin);
	}
	5% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.9vmin)
			translateX(-0.05vmin);
	}
	10% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.8vmin)
			translateX(0.1vmin);
	}
	15% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.7vmin)
			translateX(-0.1vmin);
	}
	20% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.6vmin)
			translateX(0.05vmin);
	}
	25% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.5vmin)
			translateX(-0.1vmin);
	}
	30% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.4vmin)
			translateX(0.1vmin);
	}
	35% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.3vmin)
			translateX(-0.05vmin);
	} /*8*/
	40% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.2vmin)
			translateX(0.1vmin);
	}
	45% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.1vmin)
			translateX(-0.1vmin);
	}
	50% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49vmin)
			translateX(0.05vmin);
	}
	55% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.1vmin)
			translateX(-0.1vmin);
	}
	60% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.2vmin)
			translateX(0.1vmin);
	}
	65% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.3vmin)
			translateX(-0.05vmin);
	}
	70% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.4vmin)
			translateX(0.1vmin);
	}
	75% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-49.5vmin)
			translateX(-0.1vmin);
	} /*16*/
	100% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-50vmin)
			translateX(0.1vmin);
	}
}

@keyframes landing {
	0% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(-50vmin);
	}
	70% {
		transform: rotateX(0deg) rotateY(-4deg) translateY(0vmin);
	}
	75% {
		transform: rotateX(0deg) rotateY(-3deg) translateY(1.5vmin);
	}
	80% {
		transform: rotateX(0deg) rotateY(-2deg) translateY(0vmin);
	}
	85% {
		transform: rotateX(0deg) rotateY(-2deg) translateY(1vmin);
	}
	90% {
		transform: rotateX(0deg) rotateY(-3deg) translateY(0vmin);
	}
	95% {
		transform: rotateX(0deg) rotateY(-4deg) translateY(0.5vmin);
	}
	100% {
		transform: rotateX(0deg) rotateY(-5deg) translateY(0vmin);
	}
}

/*** SOLAR PANEL ***/

.solar-panel {
	width: 12vmin;
	height: 5vmin;
	background: radial-gradient(
			#004c00,
			#004c00 12%,
			#ffa500 13%,
			#ffa500 18%,
			#333 20%,
			#333 21%,
			#fff0 25%,
			#fff0
		),
		repeating-linear-gradient(
			0deg,
			#fff0 4px,
			#ffffff10 8px,
			#ffffff30 13px,
			#fff0 13px
		),
		repeating-linear-gradient(
			90deg,
			#fff0 4px,
			#ffffff10 8px,
			#ffffff30 13px,
			#fff0 13px
		);
	transform: rotateX(-100deg) translateZ(1vmin);
	border: 0.75vmin solid orange;
	box-shadow: 0 0 0 1px #333;
	border-radius: 1px;
	position: absolute;
	left: calc(50% - 6.2vmin);
	background-color: #333;
}

/*** ROTOR SHAFT ***/

.rotor-shaft {
	width: 1vmin;
	height: 10vmin;
	background: linear-gradient(90deg, #212121, #555);
	position: absolute;
	left: calc(50% - 0.5vmin);
	top: 3.3vmin;
	z-index: -1;
}

.rotor-shaft:before {
	content: "";
	background: linear-gradient(0deg, #313131, #111, #313131);
	width: 100%;
	height: 100%;
	position: absolute;
	transform: rotateY(90deg);
}

.rotor-shaft span,
.rotor-shaft span:before,
.rotor-shaft span:after {
	background: #000;
	width: 2.5vmin;
	height: 2.5vmin;
	position: absolute;
	transform: rotateX(90deg) translate3d(-0.75vmin, 0vmin, -1vmin);
	border-radius: 100%;
	transform-style: preserve-3d;
}

.rotor-shaft span:before {
	content: "";
	background: #212121;
	transform: rotateX(0deg) translate3d(0vmin, 0vmin, 0.2vmin);
}

.rotor-shaft span:after {
	content: "";
	background: #212121;
	transform: rotateX(0deg) translate3d(0vmin, 0vmin, -0.2vmin);
}

.rotor-shaft span + span {
	top: 6vmin;
}

/*** HELIXES ***/

.helix-top,
.helix-bot {
	position: absolute;
	width: 30vmin;
	height: 3vmin;
	border-radius: 100% 0;
	top: 6vmin;
	left: calc(50% - 15vmin);
	transform: rotateX(70deg) rotateZ(0deg);
	border: 1px solid #333333;
	background-color: #121212;
	background-image: linear-gradient(
			45deg,
			black 25%,
			transparent 25%,
			transparent 75%,
			black 75%,
			black
		),
		linear-gradient(
			-45deg,
			black 25%,
			transparent 25%,
			transparent 75%,
			black 75%,
			black
		);
	background-size: 1.15vmin 1.15vmin;
}
.helix-bot {
	top: 8vmin;
	transform: rotateX(-110deg) rotateZ(-10deg);
}

#switch:checked ~ .ingenuity .helix-top {
	transform: none;
	animation: helix-top-spin 0.085s 0s infinite;
}

#switch:checked ~ .ingenuity .helix-bot {
	transform: none;
	animation: helix-bot-spin 0.075s 0s infinite;
}

@keyframes helix-top-spin {
	0% {
		transform: rotateX(70deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(70deg) rotateZ(359deg);
	}
}

@keyframes helix-bot-spin {
	0% {
		transform: rotateX(-110deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(-110deg) rotateZ(359deg);
	}
}

/*** BODY BOX ***/

.body-box {
	position: absolute;
	width: 6vmin;
	height: 6vmin;
	background: #efefef;
	top: 12.5vmin;
	left: calc(50% - 2.5vmin);
	transform: translate3d(-0.5vmin, 0, -3.25vmin);
	transform-style: preserve-3d;
	z-index: -2;
}

.body-box > span {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #bcc6cc, #eee 33%, #eee 38%, #bcc6cc);
	border: 1px solid #fff;
}

.body-box span:nth-child(1) {
	transform: rotateX(90deg) translate3d(0px, 3vmin, 3vmin);
	filter: brightness(1.05);
}
.body-box span:nth-child(2) {
	transform: rotateX(0deg) translate3d(0, 0, 6vmin);
	filter: brightness(0.95);
}
.body-box span:nth-child(3) {
	transform: rotateY(-90deg) translate3d(3vmin, 0, 3vmin);
}
.body-box span:nth-child(4) {
	transform: rotateX(-90deg) translate3d(0, -3vmin, 3vmin);
}
.body-box span:nth-child(5) {
	transform: rotateY(90deg) translate3d(-3vmin, 0, 3vmin);
}
.body-box span:nth-child(6) {
	transform: rotateY(0deg) translate3d(0, 0, 0);
}

.body-box span:nth-child(1):before {
	content: "";
	background: radial-gradient(#2d2d2d, transparent 50%),
		radial-gradient(transpa.........完整代码请登录后点击上方下载按钮下载查看