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

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

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