css外星飞船视频录制效果-html代码-BFW代码库

代码语言：html
代码描述：css外星飞船视频录制效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<style type="text/css">
        html, body{
  margin:0px; 
  padding:0px;
  height:100%;
}
html{background: linear-gradient(to bottom, rgb(3,77,114) 1%,rgb(113,49,99) 100%);}
body{
  overflow:hidden;
  width: 100%;
}
.scene{
  width: 100%;
  height:100%;
  animation: focus 10s ease-in-out infinite;
  -webkit-filter:blur(5px); 
  z-index:1;
  position:absolute;
}
 @keyframes focus { 
  0% {-webkit-filter:blur(0px);}
  30% {-webkit-filter:blur(0px);}
  50% {-webkit-filter:blur(4px);}
  60% {-webkit-filter:blur(0px);}
  80% {-webkit-filter:blur(0px);}
  90% {-webkit-filter:blur(10px);}
  100% {-webkit-filter:blur(0px);}
} 
.ufoWrap{
  display: table;
  height:100%;
  width:100%;
  position:absolute;
  z-index:3;
}
.center{
  background: transparent; 
  height:100%;
  display:table-cell; 
  vertical-align:middle; 
}

/* -- ufo styles -- */

.ufoInner{position:relative; animation: ufo 20s ease-in-out infinite;opacity:0.5; }
@keyframes ufo { 50% {transform: translate(10px, -80px) scale(1.2) rotate(2deg);
    opacity:1.0; 
  
  }}
#ufo{
  width: 325px;
  height: 41px;
  margin: 0 auto;
  border-radius: 50%;
  background: #141618;
  box-shadow: inset -15px -4px 16px rgba(60, 29, 94, 0.2), inset 15px -4px 16px rgba(55, 50, 117, 0.19), inset 0px -4px 18px #313234, 0px -1px 0px #2b2e2a, 0px -3px 0px #222;
  position:relative;
}
#ufo:before{
content: ' ';
display: block;
width: 320px;
height: 41px;
position: relative;
margin: 0 auto;
border-radius: 50%;
background: #555;
box-shadow: inset 0px 2px 0px rgba(184, 232, 255, 0.78);
z-index: -1;
top: -7px;
}
ul.blinkers{
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  display: block;
  height: 100%;
}
ul.blinkers li{
  list-style-type:none; 
  background:#758c8a;
  width:5px; 
  height:2px; 
  position:absolute; 
  border-radius:50%;
  box-shadow: 0px -1px 2px #000, 0px 3px 2px rgba(74, 196, 235, 0.16);
}
ul.blinkers li:nth-child(1){top: 23px;left: 45px;opacity:0.5;width:5px;}
ul.blinkers li:nth-child(2){left: 119px;top: 13px;}
ul.blinkers li:nth-child(3){right: 91px; top: 15px; opacity:0.7}
ul.blinkers li:nth-child(4){bottom: 14px; right: 33px; opacity:0.4;}
.dome{
width: 101px;
height: 24px;
background: #D3F0FF;
position: relative;
top: -55px;
z-index: -2;
margin: 0 auto;
border-radius: 50%;
left: 4px;
box-shadow: inset -11px 2px 4px #61A3DF, inset -10px -18px 9px #000, 0px 57px 28px rgba(121, 179, 218, 0.8);
border-top: 2px solid rgba(255,255,255,0.5);
}
.antigrav{
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #8ca6b9;
  position: relative;
  left: 3px;
  border-radius: 50%;
  top: -38px; 
  overflow:hidden; 
  box-shadow: 0px -4px 0px #111, 0px -17px 17px rgba(155, 227, 250, 0.13);
  /* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

}
.inner{
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #d6f9ff;
  position: relative;
  border-radius: 50%;
  top: -7px;
  border: 1px solid #3a6075;
  z-index: 1;
  box-shadow: 0px 1px 1px rgba(14, 32, 42, 0.3);
}
.rings {
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #7298ad;
  position: relative;
  border-radius: 50%;
  top: -5px;
  border: 1px solid #3a6075;
  overflow: hidden;
  box-shadow: inset 0px -1px 0px #BED3DF, 0px 1px 0px rgba(140, 166, 185, 0.77);
}
.rings ul {
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 100%;
  top: -13px;
}
.rings ul li {
  float: left;
  background: #4a7185;
  display: block;
  width: 1px;
  height: 19px;
  margin-right: 1px;
}
.rings ul li:nth-child(3n+3){
  box-shadow: 0px 0px 0px #fff; 
  animation-name: rings; 
  animation-duration: .2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;}
@keyframes rings {
  0% {box-shadow: 0px 0px 0px rgba(255,255,255,0.8);}
  100% {box-shadow: 10px 0px 5px rgba(255,255,255,0.8);}
}

.thrust{
  width: 100%;
  padding-left: 100px;
  position: relative;
  top: -40px;
  z-index: 1;
  animation: thrusting 10s ease-in-out infinite;
  opacity:0.2;
  -webkit-filter:blur(0px);
}
@keyframes thrusting { 50% {opacity:0.6;-webkit-filter:blur(1.0);}}

.thrust ul{
  width:39%; 
  margin:0px; 
  padding:0px;
  list-style-type:none;
  text-align:center;
  padding-left:4px;
  height:10px;
  position:relative;
}
.thrust ul li {
  display: inline-block;
  width: 15px;
  background: rgba(142, 206, 236, 0.52);
  height: 10px;
  border-radius: 0px 0px 50% 50%;
  position: absolute;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.23), inset 0px 23px 6px #8DDCF0;
  -webkit-filter: blur(4px);
}
.thrust ul li:nth-child(1) {
  animation-name: move;
  left: 3px;
  height: 40px;
  width: 10px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 25px 1px rgba(121, 179, 218, 0.6);
  animation: move1 10s ease-in-out infinite;
}
.thrust ul li:nth-child(2) {
  animation: move2 15s ease-in-out infinite;
  left: 18px;
  height: 70px;
  width: 15px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 27px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(3) {
  animation: move3 20s ease-in-out infinite;
  left: 33px;
  height: 91px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 39px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(4) {
  animation: move4 25s ease-in-out infinite;
  height: 101px;
  left: 50px;
  width: 18px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 47px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(5) {
  animation: move5 25s ease-in-out infinite;
  left: 68px;
  height: 94px;
  width: 14px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 36px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(6) {
  animation: move6 20s ease-in-out infinite;
  left: 87px;
  height: 75px;
  width: 10px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 31px 0px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(7) {
  animation: move7 15s ease-in-out infinite;
  left: 96px;
  width: 9px;
  height: 50px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 18px 0px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(8) {
  animation: move8 10s ease-in-out infinite;
  left: 115px;
  height: 37px;
  width: 10px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.2), inset 0px 16px 0px rgba(121, 179, 218, 0.6);
  background: rgba(200, 246, 255, 0.38);
}
@keyframes move1 { 50% {height:45px;transform: translate(115px, 0px);}}
@keyframes move2 { 50% {height:75px;transform: translate(85px, 0px);}}
@keyframes move3 { 50% {height:100px;transform: translate(50px, 0px);}}
@keyframes move4 { 50% {height:120px;transform: translate(15px, 0px);}}
@keyframes move5 { 50% {height:100px;transform: translate(-20px, 0px);}}
@keyframes move6 { 50% {height:75px;transform: translate(-55px, 0px);}}
@keyframes move7 { 50% {height:60px;transform: translate(-85px, 0px);}}
@keyframes move8 { 50% {height:47px;transform: translate(-115px, 0px);}}

/*-- foreground --*/
.foreground{
  background: transparent;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  pointer-events:none;
  z-index: 2;
}

/*-- trees mid --*/
ul.trees2{
  position: absolute;
  bottom: 0px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  text-align:center;
  -webkit-filter:blur(3px); 
}
ul.trees2 li{
  width: 0px;
display: block;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 400px solid #371c3b;
border-top: 0px solid transparent;
position:absolute;
bottom:-50px;
animation: wind 10s ease-in-out infinite;}
@keyframes wind { 50% {transform: rotate(10deg);}}

ul.trees2 li:nth-child(1) {left: -82px;bottom: 10px;}
ul.trees2 li:nth-child(2) {left: -10px;}
ul.trees2 li:nth-child(3) {left: 40px;bottom: -80px;}
ul.trees2 li:nth-child(4) {left: 90px;bottom: -100px;}
ul.trees2 li:nth-child(5) {left: 120px;bottom: -50px;}
ul.trees2 li:nth-child(6) {left: 190px;bottom: -120px;}
ul.trees2 li:nth-child(7) {left: 270px;bottom: -150px;}
ul.trees2 li:nth-child(8) {left: 320px;bottom: -180px;}
ul.trees2 li:nth-child(9) {right: -80px;}
ul.trees2 li:nth-child(10) {right: -20px;bottom: 40px;}
ul.trees2 li:nth-child(11) {right: 44px;bottom: -20px;}
ul.trees2 li:nth-child(12) {right: 100px;bottom: -40px;}
ul.trees2 li:nth-child(13) {right: 191px;bottom: -110px;}
ul.trees2 li:nth-child(14) {right: 220px;bottom: -120px;}
ul.trees2 li:nth-child(15) {right: 270px;bottom: -180px;}
ul.trees2 li:nth-child(16) {right: 340px;bottom: -210px;}

/*-- trees front --*/
ul.trees1{
  position: absolute;
  bottom: -140px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  text-align:center;
  -webkit-filter:blur(8px); 
}
ul.trees1 li{
  width: 0px;
display: block;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 400px solid #251329;
border-top: 0px solid transparent;
position:absolute;
bottom:-50px;
animation: windys 20s ease-in-out infinite;
animation-delay: 3.5s;
}
@keyframes windys { 
  25% {transform: rotate(-10deg);}
  50% {transform: rotate(10deg);}

}

ul.trees1 li:nth-child(1) {left: -82px;bottom: 10px;}
ul.trees1 li:nth-child(2) {left: -10px;}
ul.trees1 li:nth-child(3) {left: 40px;bottom: -80px;}
ul.trees1 li:nth-child(4) {left: 90px;bottom: -100px;}
ul.trees1 li:nth-child(5) {left: 120px;bottom: -50px;}
ul.trees1 li:nth-child(6) {left: 190px;bottom: -120px;}
ul.trees1 li:nth-child(7) {left: 270px;bottom: -150px;}
ul.trees1 li:nth-child(8) {left: 320px;bottom: -180px;}
ul.trees1 li:nth-child(9) {right: -80px;}
ul.trees1 li:nth-child(10) {right: 0px;bottom: 30px;}
ul.trees1 li:nth-child(11) {right: 94px;bottom: -100px;}
ul.trees1 li:nth-child(12) {right: 150px;bottom: -50px;}
ul.trees1 li:nth-child(13) {right: 211px;bottom: -190px;}
ul.trees1 li:nth-child(14) {right: 240px;bottom: -150px;}
ul.trees1 li:nth-child(15) {right: 302px;bottom: -240px;}
ul.trees1 li:nth-child(16) {right: 340px;bottom: -210px;}

/*-- trees back --*/
ul.trees3 {
position: absolute;
bottom: -140px;
margin: 0px;
padding: 0px;
width: 100%;
text-align: center;
-webkit-filter: blur(2px);
left: 250px;
}
ul.trees3 li {
width: 0px;
display: block;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 400px solid #432247;
border-top: 0px solid transparent;
position: absolute;
bottom: -50px;
animation: windy 10s ease-in-out infinite;
animation-delay: 1.5s;
}
@keyframes windy { 50% {transform: rotate(10deg);}}

ul.trees3 li:nth-child(1) {left: -82px;bottom: 10px;}
ul.trees3 li:nth-child(2) {left: -19px;bottom: -23px;}
ul.trees3 li:nth-child(3) {left: 66px;bottom: -60px;}
ul.trees3 li:nth-child(4) {left: 90px;bottom: -100px;}
ul.trees3 li:nth-child(5) {left: 120px;bottom: -90px;}
ul.trees3 li:nth-child(6) {left: 153px;bottom: -110px;}
ul.trees3 li:nth-child(7) {left: 191px;bottom: -139px;}
ul.trees3 li:nth-child(8) {left: 253px;bottom: -180px;}
ul.trees3 li:nth-child(9) {right: 370px;bottom: 70px;}
ul.trees3 li:nth-child(10) {right: 420px;bottom: 50px;}
ul.trees3 li:nth-child(11) {right: 504px;bottom: -20px;}
ul.trees3 li:nth-child(12) {right: 550px;bottom: -50px;}
ul.trees3 li:nth-child(13) {right: 627px;bottom: -100px;}
ul.trees3 li:nth-child(14) {right: 670px;bottom: -91px;}
ul.trees3 li:nth-child(15) {right: 696px;bottom: -132px;}
ul.trees3 li:nth-child(16.........完整代码请登录后点击上方下载按钮下载查看