jquery+bootstrap实现太空飞船驾驶答题考试体验代码

代码语言:html

所属分类:其他

代码描述:jquery+bootstrap实现太空飞船驾驶答题考试体验代码,答错题会出现挡风玻璃破碎风险。

代码标签: jquery bootstrap 太空 飞船 驾驶 答题 考试 体验 代码

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

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

<head>
  <meta charset="UTF-8">
  

  <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/1LCbHWr3HqlNFFenj6KXfkcgvDhAjvkie=w3000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/1jKvfGtRQm4WCmFO39M9r69Yl2d9WXFuj=w3000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/1l-dv7m_4mA7gZersFoVUSCA_YSX_3Wsk=w3000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/1PFgLMXCR2R6s1jFMyLuSUvmPvJ3nAw2z=w3000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/18WGTljSx6w5OdPXCcapOJyMSCPckcEDK=w1000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/1f_ZLHB3SEc-3ENY2uLoEPAqwRroOwGE2=w1000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/1ZOA0RU7I2TUeSEm_4nMqXIz6I1Q-boCS=w1000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/1HIa3Tt6T83EhX2kTM6OQQe9s97o6HFWy=w1000.png" as="image">
    <link rel="preload" href="//repo.bfw.wiki/bfwrepo/images/space/12HBTY5nqKYzNkwpL5QTEoU_f-_ai6IWX=w1000.png" as="image">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  
<style>
body {
	padding: 0;
	margin: 0;
	font-family: "Aldrich", sans-serif;
	color: white;
}

div.spaceship {
	width: 120%;
	height: 120%;
	margin-left: -10%;
	margin-top: -5%;
	position: fixed;
	overflow-y: hidden;
	overflow-x: hidden;
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1LCbHWr3HqlNFFenj6KXfkcgvDhAjvkie=w3000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-animation: spaceship-lightMove 30s linear infinite both;
	animation: spaceship-lightMove 30s linear infinite both;
}

div.spaceshipContainer {
	background: transparent;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

div.spaceshipContainerShaked {
	-webkit-animation: spaceship-shaked 0.5s linear infinite both;
	animation: spaceship-shaked 0.5s linear infinite both;
}

div.spaceshipAlert {
	width: 120%;
	height: 120%;
	margin-left: -10%;
	margin-top: -5%;
	position: fixed;
	overflow-y: hidden;
	overflow-x: hidden;
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1jKvfGtRQm4WCmFO39M9r69Yl2d9WXFuj=w3000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-animation: spaceship-shaked 0.5s linear infinite both,
		flickerAnimation 1s infinite;
	animation: spaceship-shaked 0.5s linear infinite both,
		flickerAnimation 1s infinite;

	pointer-events: none;
	/*    -webkit-animation: wobble 80s linear infinite both;
            animation: wobble 80s linear infinite both;*/
}

.mini-spaceship {
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow-y: hidden;
	overflow-x: hidden;
	background: url(//repo.bfw.wiki/bfwrepo/images/space/12HBTY5nqKYzNkwpL5QTEoU_f-_ai6IWX=w1000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-animation: slide-in-left 2s linear both, disappear 2s linear both;
	animation: slide-in-left 2s linear both, disappear 2s linear both;
}

.mini-meteorite {
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow-y: hidden;
	overflow-x: hidden;
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1HIa3Tt6T83EhX2kTM6OQQe9s97o6HFWy=w1000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-animation: slide-in-right 2s linear both, disappear 2s linear both;
	animation: slide-in-right 2s linear both, disappear 2s linear both;
}

.mini-explosion {
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
	overflow-x: hidden;
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1ZOA0RU7I2TUeSEm_4nMqXIz6I1Q-boCS=w1000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-animation: puff-out-hor 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 2s both,
		appear 2s linear both;
	animation: puff-out-hor 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 2s both,
		appear 2s linear both;
}

div#blogContainer {
	position: fixed;
	z-index: 99;
	left: 0;
	bottom: 0;
	width: 100%;
	color: white;
	text-align: center;
	background: rgba(19, 27, 61, 0.62);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

#blogContainer input {
	margin-top: 20px;
	padding: 40px;
	width: 100%;
	border-radius: 30px;
	background: rgba(0, 190, 190, 0.2);
	border: none;
	color: white;
	border: 1px solid #11f9fb;
}

#blogContainer a {
	font-size: 1em;
}

div.spaceshipContainer .container .col-md-4 {
	border: 1px solid black;
	-webkit-animation: focus-in-expand-fwd 0.8s
		cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: focus-in-expand-fwd 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

div#impactGauche,
div#impactDroite,
div#impactCentre {
	width: 120%;
	height: 120%;
	margin-left: -10%;
	margin-top: -5%;
	position: fixed;
	overflow-y: hidden;
	overflow-x: hidden;
}

div#impactGauche {
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1l-dv7m_4mA7gZersFoVUSCA_YSX_3Wsk=w3000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

div#impactDroite {
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1PFgLMXCR2R6s1jFMyLuSUvmPvJ3nAw2z=w3000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

div#impactCentre {
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1_XBYha4cPemJ3OVY9jbUmIeAM5jGE4R3=w3000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100%;
}

.questionTitle {
	text-align: center;
	margin-top: 20px;
	-webkit-animation: focus-in-expand-fwd 0.8s
		cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: focus-in-expand-fwd 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.questionText {
	text-align: center;
	-webkit-animation: focus-in-expand-fwd 0.8s
		cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: focus-in-expand-fwd 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

object.commandsContainer {
	width: 120%;
	height: 120%;
	margin-left: -10%;
	margin-top: -5%;
	position: fixed;
	overflow-y: hidden;
	overflow-x: hidden;
	object-fit: cover;
	-webkit-animation: spaceship-lightMove 3s linear infinite both;
	animation: spaceship-lightMove 3s linear infinite both;
	pointer-events: none;
}

#commands svg #play {
	cursor: pointer;
}

.questionsContainer {
	background: rgba(19, 27, 61, 0.62);
	box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2);
	border-radius: 40px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	transform: perspective(1000px) rotateX(5deg);
	margin-top: 18%;
	-webkit-animation: scale-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: scale-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	backdrop-filter: blur(3px);
}

.introContainer {
	width: 90%;
	max-width: none;
}

.introContainer p {
	font-size: 2em;
}

#question3 a.right:hover {
	cursor: pointer;
	color: #11f9fb;
}

.spaceship-shaked {
	-webkit-animation: vibrate-3 0.5s linear infinite both;
	animation: vibrate-3 0.5s linear infinite both;
}

span.time {
	display: flex;
	font-size: 3em;
	line-height: 1.5;
	font-weight: 900;
	color: #11f9fb;
	text-align: left;
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
}

.btn-default {
	position: relative;
	width: 100%;
	background: rgba(0, 190, 190, 0.2);
	border: 1px solid #11f9fb;
	cursor: pointer;
	color: #11f9fb;
	font-weight: 500;
	transition: 0.3s;
	text-transform: uppercase;
	font-size: 1.5em;
	overflow: hidden;
	outline: none;
	margin-top: 20px;
	border-radius: 40px;
}

.btn-default:before,
.btn-default:after {
	content: "";
	position: absolute;
	height: 25px;
	background: #11f9fb;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}

.btn-default:before {
	left: -20px;
}

.btn-default:after {
	right: -20px;
}

.btn-default:hover,
.btn-default:focus {
	box-shadow: 0 0 25px #11f9fb, 0 1px 5px #11f9fb;
	border-color: #00dcdc;
	background: rgba(17, 249, 251, 0.2);
	color: rgba(0, 0, 0, 0.7);
	border: none;
}

.btn-default:hover:before,
.btn-default:focus:before {
	animation: leftbox 0.1s forwards;
}

.btn-default:hover:after,
.btn-default:focus:after {
	animation: rightbox 0.1s forwards;
}

.star {
	position: absolute;
	width: 30px;
	height: 30px;
	opacity: 0;
	background: url(//repo.bfw.wiki/bfwrepo/images/space/1f_ZLHB3SEc-3ENY2uLoEPAqwRroOwGE2=w1000.png)
		no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.star:nth-child(1) {
	transform: translate(19vw, 80vh) scale(2);
	animation: move 0.753s cubic-bezier(0.97, 0.215, 0.98, 0.77) 0.46s infinite;
}

.star:nth-child(2) {
	transform: translate(28vw, 11vh) scale(2);
	animation: move 0.753s cubic-bezier(0.97, 0.215, 0.98, 0.77) 1.62s infinite;
}

.star:nth-child(3) {
	transform: translate(57vw, 12vh) scale(2);
	animation: move 0.672s cubic-bezier(0.97, 0.215, 0.98, 0.77) 0.36s infinite;
}

.star:nth-child(4) {
	transform: translate(70vw, 2vh) scale(2);
	animation: move 0.612s cubic-bezier(0.97, 0.215, 0.98, 0.77) 0.77s infinite;
}

.star:nth-child(5) {
	transform: translate(69vw, 15vh) scale(2);
	animation: move 0.741s cubic-bezier(0.97, 0.215, 0.98, 0.77) 1.19s infinite;
}

.star:nth-child(6) {
	transform: translate(16vw, 77vh) scale(2);
	animation: move 0.762s cubic-bezier(0.97, 0.215, 0.98, 0.77) 0.23s infinite;
}

.star:nth-child(7) {
	transform: translate(83vw, 48vh) scale(2);
	animation: move 0.663s cubic-bezier(0.97, 0.215, 0.98, 0.77) 1.49s infinite;
}

.star:nth-child(8) {
	transform: translate(96vw, 39vh) scale(2);
	animation: move 0.612s cubic-bezier(0.97, 0.215, 0.98, 0.77) 2.65s infinite;
}

.star:nth-child(9) {
	transform: translate(14vw, 14vh) scale(2);
	animation: move 0.795s cubic-bezier(0.97, 0.215, 0.98, 0.77) 0.49s infinite;
}

.star:nth-child(10) {
	transform: translate(85vw, 17vh) scale(2);
	animation: move 0.69s cubic-bezier(0.97, 0.215, 0.98, 0.77) 0.89s infinite;
}

.startGame,
.endGame {
	width: 100vw;
	height: 100vh;
	background-color: black;
	background: url("//repo.bfw.wiki/bfwrepo/images/space/1ulz1tNn7vmA7cYBmxQsX04G2dbwEu_rg=w3000.png")
		no-repeat center center;
	background-size: cover;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.title {
	width: 100%;
	font-size: 8em;
	text-align: center;
	-webkit-animation: text-pop-up-top 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: text-pop-up-top 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.startGame .btn {
	z-index: 999;
	width: 300px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.astronaut {
	width: 50%;
	-webkit-animation: astronaut 15s ease-in-out infinite both;
	animation: astronaut 15s ease-in-out infinite both;
	position: absolute;
	bottom: -200px;
	right: -200px;
}

.endGame .btn,
.startGame .btn {
	z-index: 999;
	width: 300px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.endGame .btn:hover,
.startGame .btn:hover {
	color: black !important;
}

.console-container {
	font-size: 2em;
	text-align: center;
	display: block;
	color: white;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.console-underscore {
	display: inline-block;
	top: -0.14em;
	left: 10px;
}

iframe {
	border: none;
}

/**
 * ----------------------------------------
 * RESPONSIVE
 * ----------------------------------------
 */

@media only screen and (max-width: 900px) {
	.questionsContainer {
		margin-top: 10%;
	}

	.title {
		margin-top: 15%;
		font-size: 5em;
	}

	#blogContainer {
		display: none;
	}

	.console-container {
		font-size: 1em;
		line-height: 1.2 !important;
	}

	.introContainer {
		padding: 10px;
		border-radius: 20px;
		margin-top: -20px;
	}
}

/**
 * ----------------------------------------
 * ANIMATIONS
 * ----------------------------------------
 */

/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
@-webkit-keyframes text-pop-up-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		text-shadow: none;
	}
	100% {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc,
			0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc,
			0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
	}
}
@keyframes text-pop-up-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		text-shadow: none;
	}
	100% {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc,
			0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc,
			0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
	}
}

/**
 * ----------------------------------------
 * animation spaceship-lightMove
 * ----------------------------------------
 */
@-webkit-keyframes spaceship-lightMove {
	0% {
		-webkit-transform: translate(0) rotate(0);
		transform: translate(0) rotate(0);
	}

	20% {
		-webkit-transform: translate(-10px, 10px) rotate(-2deg);
		transform: translate(-10px, 10px) rotate(-2deg);
	}

	40% {
		-webkit-transform: translate(-10px, -10px) rotate(0);
		transform: translate(-10px, -10px) rotate(0);
	}

	60% {
		-webkit-transform: translate(10px, 10px) rotate(0);
		transform: translate(10px, 10px) rotate(0);
	}

	80% {
		-webkit-transform: translate(10px, -10px) rotate(2deg);
		transform: translate(10px, -10px) rotate(2deg);
	}

	100% {
		-webkit-transform: translate(0) rotate(0);
		transform: translate(0) rotate(0);
	}
}

/**
 * ----------------------------------------
 * animation spaceship-shaked
 * ----------------------------------------
 */
@-webkit-keyframes spaceship-shaked {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}

	10% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	20% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}

	30% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	40% {
		-webkit-transform: translate(2px, 2px);
		transform: translate(2px, 2px);
	}

	50% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	60% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}

	70% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	80% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	90% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}

	100% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}

@keyframes spaceship-shaked {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}

	10% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	20% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}

	30% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	40% {
		-webkit-transform: translate(2px, 2px);
		transform: translate(2px, 2px);
	}

	50% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	60% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}

	70% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	80% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	90% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}

	100% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}

@keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation focus-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-expand-fwd {
	0% {
		letter-spacing: -0.5em;
		-webkit-transform: translateZ(-800px);
		transform: translateZ(-800px);
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}

@keyframes focus-in-expand-fwd {
	0% {
		letter-spacing: -0.5em;
		-webkit-transform: translateZ(-800px);
		transform: translateZ(-800px);
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation scale-in-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-top {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		opacity: 1;
	}
}

@keyframes scale-in-top {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		opacity: 1;
	}
}

@keyframes leftbox {
	0% {
		left: -22px;
	}

	50% {
		height: 30px;
		width: 30px;
	}

	100% {
		height: 200%;
		width: 150%;
	}
}

@keyframes rightbox {
	0% {
		right: -22px;
	}

	50% {
		height: 30px;
		width: 30px;
	}

	100% {
		height: 200%;
		width: 150%;
	}
}

@keyframes move {
	0% {
		transform: translate(50vw, 50vh) scale(0.2);
	}

	20% {
		opacity: 0.1;
	}

	30% {
		opacity: 0.2;
	}

	40% {
		opacity: 0.3;
	}

	60% {
		opacity: 0.6;
	}

	80% {
		opacity: 0.8;
	}

	90% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
	}
}

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes astronaut {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}

	20% {
		-webkit-transform: translate(-20px, 20px);
		transform: translate(-20px, 20px);
	}

	40% {
		-webkit-transform: translate(-20px, -20px);
		transform: translate(-20px, -20px);
	}

	60% {
		-webkit-transform: translate(20px, 20px);
		transform: translate(20px, 20px);
	}

	80% {
		-webkit-transform: translate(20px, -20px);
		transform: translate(20px, -20px);
	}

	100% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}

@keyframes astronaut {
	0% {
		-webkit-transform: translate(0);
		transform: tran.........完整代码请登录后点击上方下载按钮下载查看

网友评论0