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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0