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

代码语言：html

所属分类：其他

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