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

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

代码语言：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 alter.........完整代码请登录后点击上方下载按钮下载查看