UFO飞碟吸入人动画效果
代码语言：html
所属分类：动画
代码描述：UFO飞碟吸入人动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*, *:before, *:after {
box-sizing: border-box;
}
:root {
--bg-dark-blue: #012459;
--bg-v-dark-blue: #040b3c;
--white: #fff;
--light-grey: #b3b3b3;
--yellow: #ffea00;
--orange: #ffa500;
--shine: #e6e6e6;
--purp-blue: #4a5187;
--sky-blue: #53caff;
--grey: rgba(0, 0, 0, 0.5);
--coefficient: 1vmin;
--circle-size: 75;
}
body {
background: #040b3c;
background: -webkit-gradient(linear, left top, left bottom, from(var(--bg-dark-blue)), to(var(--bg-v-dark-blue)));
background: linear-gradient(to bottom, var(--bg-dark-blue) 0%, var(--bg-v-dark-blue) 100%);
background-repeat: no-repeat;
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
overflow: hidden;
}
.circle {
height: calc(var(--circle-size) * var(--coefficient));
width: calc(var(--circle-size) * var(--coefficient));
border: calc(2 * var(--coefficient)) solid var(--white);
border-radius: 50%;
position: relative;
box-shadow: 0 10px 30px var(--grey);
background: -webkit-gradient(linear, left bottom, right top, from(var(--bg-v-dark-blue)), color-stop(30%, var(--bg-dark-blue)));
background: linear-gradient(to top right, var(--bg-v-dark-blue) 0%, var(--bg-dark-blue) 30%);
overflow: hidden;
}
.star {
--left: calc(var(--posX) * 3%);
--top: calc(var(--posY) * 3%);
position: absolute;
background: var(--white);
height: calc(var(--w) * 0.12%);
width: calc(var(--w) * 0.1%);
border-radius: 50%;
left: var(--left);
top: var(--top);
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
opacity: var(--alpha);
-webkit-animation: star-move calc((var(--group) * 40) * 1s) linear infinite;
animation: star-move calc((var(--group) * 40) * 1s) linear infinite;
}
@-webkit-keyframes star-move {
0% {
-webkit-transform: rotate(-20deg) translateX(-500px);
transform: rotate(-20deg) translateX(-500px);
}
100% {
-webkit-transform: rotate(-20deg) translateX(500px);
transform: rotate(-20deg) translateX(500px);
}
}
@keyframes star-move {
0% {
-webkit-transform: rotate(-20deg) translateX(-500px);
transform: rotate(-20deg) translateX(-500px);
}
100% {
-webkit-transform: rotate(-20deg) translateX(500px);
transform: rotate(-20deg) translateX(500px);
}
}
.ufo {
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
display: none;
}
.ufo__laser {
opacity: 0;
will-change: opacity;
position: absolute;
height: 100%;
width: 48%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
box-shadow:
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-10px 0 80px #f0f,
10px 0 80px #0ff;
-webkit-clip-path: polygon(40% 0, 60% 0, 70% 100%, 25% 100%);
clip-path: polygon(40% 0, 60% 0, 70% 100%, 25% 100%);
}
.ufo__wrapper {
width: 100%;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ufo__light {
height: 45%;
width: 0.5%;
background: var(--light-grey);
-webkit-clip-path: circle(50% at 50% 100%);
clip-path: circle(50% at 50% 100%);
position: absolute;
top: 15%;
left: 50%;
z-index: 3;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ufo__light:before {
position: absolute;
content: '';
top: 65%;
height: 10%;
width: 400%;
border-radius: 50%;
-webkit-animation: light 2s infinite ease-in-out;
animation: light 2s infinite ease-in-out;
background: yellow;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
@-webkit-keyframes light {
from { background-color: var(--yellow); }
to { background-color: var(--orange); }
}
@keyframes light {
from { background-color: var(--yellow); }
to { background-color: var(--orange); }
}
.ufo__roof {
height: 25%;
width: 25%;
background: var(--light-grey);
-webkit-clip-path: circle(50% at 50% 100%);
clip-path: circle(50% at 50% 100%);
position: absolute;
top: 40%;
left: 50%;
z-index: 3;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ufo__roof:before {
position: absolute;
content: '';
height: 15%;
width: 4%;
right: 27%;
top: 50%;
background: var(--shine);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
border-radius: 50%;
}
.ufo__body {
height: 50%;
width: 50%;
background: var(--purp-blue);
-webkit-clip-path: ellipse(50% 13% at 50% 50%);
clip-path: ellipse(50% 13% at 50% 50%);
position: absolute;
top: 55%;
z-index: 2;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ufo__undercarriage {
height: 15%;
width: 40%;
background: var(--purp-blue);
top: 58%;
z-index: 1;
}
.ufo__undercarriage,
.ufo__beam {
position: absolute;
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ufo__beam {
height: 7%;
width: 10%;
background: var(--sky-blue);
top: 65%;
}
.person img {
position: absolute;
width: 6%;
bottom: 0%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
</head>
<body translate="no">
<div class="circle">
<div class="star" style="--posX: 7; --posY: -8; --alpha: 0.3773786339660272; --w: 10; --group: 4;"></div>
<div class="star" style="--posX: 67; --posY: 20; --alpha: 0.42213094152501895; --w: 9; --group: 2;"></div>
<div class="star" style="--posX: 24; --posY: 17; --alpha: 0.7905537423468232; --w: 2; --group: 4;"></div>
<div class="star" style="--posX: 31; --posY: -15; --alpha: 0.8834165568342724; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: 69; --posY: -1; --alpha: 0.0375000077490546; --w: 5; --group: 4;"></div>
<div class="star" style="--posX: 49; --posY: 15; --alpha: 0.8987518704617747; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: -1; --posY: 34; --alpha: 0.11956848262044661; --w: 6; --group: 2;"></div>
<div class="star" style="--posX: 42; --posY: -8; --alpha: 0.6482205509072978; --w: 2; --group: 4;"></div>
<div class="star" style="--posX: 62; --posY: 6; --alpha: 0.10890474743541789; --w: 4; --group: 2;"></div>
<div class="star" style="--posX: 68; --posY: 8; --alpha: 0.20961902532985222; --w: 6; --group: 3;"></div>
<div class="star" style="--posX: 27; --posY: 3; --alpha: 0.7105515384113026; --w: 5; --group: 4;"></div>
<div class="star" style="--posX: 8; --posY: 0; --alpha: 0.9255165669843333; --w: 6; --group: 2;"></div>
<div class="star" style="--posX: 77; --posY: 31; --alpha: 0.10087805730621757; --w: 10; --group: 4;"></div>
<div class="star" style="--posX: 46; --posY: -18; --alpha: 0.22070068085150263; --w: 11; --group: 4;"></div>
<div class="star" style="--posX: 81; --posY: 5; --alpha: 0.22126144474724962; --w: 10; --group: 3;"></div>
<div class="star" style="--posX: 42; --posY: 28; --alpha: 0.8064064902852117; --w: 9; --group: 4;"></div>
<div class="star" style="--posX: 43; --posY: 12; --alpha: 0.37683953534255243; --w: 3; --group: 3;"></div>
<div class="star" style="--posX: 51; --posY: 28; --alpha: 0.9281742300570466; --w: 10; --group: 4;"></div>
<div class="star" style="--posX: 70; --posY: 21; --alpha: 0.2851266204086562; --w: 8; --group: 3;"></div>
<div class="star" style="--posX: 65; --posY: 9; --alpha: 0.9423167495817166; --w: 6; --group: 2;"></div>
<div class="star" style="--posX: 44; --posY: -18; --alpha: 0.21604507391952543; --w: 2; --group: 2;"></div>
<div class="star" style="--posX: 27; --posY: 22; --alpha: 0.4431068669992331; --w: 8; --group: 2;"></div>
<div class="star" style="--posX: 47; --posY: 3; --alpha: 0.19346485830184146; --w: 4; --group: 4;"></div>
<div class="star" style="--posX: 53; --posY: 32; --alpha: 0.7498064209620665; --w: 5; --group: 4;"></div>
<div class="star" style="--posX: 21; --posY: 17; --alpha: 0.376138472143444; --w: 8; --group: 3;"></div>
<div class="star" style="--posX: 67; --posY: 23; --alpha: 0.3735139427497953; --w: 7; --group: 4;"></div>
<div class="star" style="--posX: 13; --posY: -18; --alpha: 0.6859730800668105; --w: 7; --group: 3;"></div>
<div class="star" style="--posX: 20; --posY: 32; --alpha: 0.8976625198319561; --w: 5; --group: 3;"></div>
<div class="star" style="--posX: 42; --posY: 28; --alpha: 0.6364561528052823; --w: 7; --group: 2;"></div>
<div class="star" style="--posX: 13; --posY: 26; --alpha: 0.9947354724220476; --w: 8; --group: 3;"></div>
<div class="star" style="--posX: 25; --posY: 34; --alpha: 0.5019101589599873; --w: 4; --group: 2;"></div>
<div class="star" style="--posX: 74; --posY: 21; --alpha: 0.23151876114377457; --w: 8; --group: 3;"></div>
<div class="star" style="--posX: 64; --posY: -18; --alpha: 0.20521631007666397; --w: 8; --group: 4;"></div>
<div class="star" style="--posX: 35; --posY: 0; --alpha: 0.4782313075708733; --w: 10; --group: 3;"></div>
<div class="star" style="--posX: 1; --posY: 19; --alpha: 0.6610735902781679; --w: 10; --group: 2;"></div>
<div class="star" style="--posX: -9; --posY: 24; --alpha: 0.5038326368623933; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: -17; --posY: 9; --alpha: 0.9185429156883866; --w: 4; --group: 4;"></div>
<div class="star" style="--posX: -14; --posY: 0; --alpha: 0.4270664337419412; --w: 10; --group: 2;"></div>
<div class="star" style="--posX: 13; --posY: 16; --alpha: 0.6676742154239248; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: 46; --posY: -11; --alpha: 0.9700259484744893; --w: 10; --group: 3;"></div>
<div class="star" style="--posX: 61; --posY: -8; --alpha: 0.8101730193427106; --w: 10; --group: 4;"></div>
<div class="star" style="--posX: 70; --posY: -18; --alpha: 0.6018631114212458; --w: 11; --group: 4;"></div>
<div class="star" style="--posX: 14; --posY: 3; --alpha: 0.8536420489036542; --w: 4; --group: 2;"></div>
<div class="star" style="--posX: 49; --posY: -14; --alpha: 0.2862851924331338; --w: 5; --group: 3;"></div>
<div class="star" style="--posX: 3; --posY: -17; --alpha: 0.13750041671002755; --w: 11; --group: 4;"></div>
<div class="star" style="--posX: 7; --posY: 10; --alpha: 0.740917113045908; --w: 5; --group: 4;"></div>
<div class="star" style="--posX: 56; --posY: -8; --alpha: 0.12406347089655467; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: -5; --posY: 25; --alpha: 0.470322637667705; --w: 10; --group: 3;"></div>
<div class="star" style="--posX: 11; --posY: 15; --alpha: 0.37585380222176745; --w: 5; --group: 2;"></div>
<div class="star" style="--posX: -11; --posY: 36; --alpha: 0.7278270767326138; --w: 2; --group: 4;"></div>
<div class="star" style="--posX: 6; --posY: -4; --alpha: 0.4901895666491509; --w: 10; --group: 4;"></div>
<div class="star" style="--posX: 51; --posY: 6; --alpha: 0.2037596589213999; --w: 5; --group: 4;"></div>
<div class="star" style="--posX: 58; --posY: 40; --alpha: 0.36153230049120455; --w: 9; --group: 3;"></div>
<div class="star" style="--posX: 42; --posY: 41; --alpha: 0.10671489727263572; --w: 9; --group: 4;"></div>
<div class="star" style="--posX: -17; --posY: -8; --alpha: 0.7927147437982076; --w: 7; --group: 3;"></div>
<div class="star" style="--posX: 49; --posY: 41; --alpha: 0.5642789731282534; --w: 9; --group: 2;"></div>
<div class="star" style="--posX: -12; --posY: -9; --alpha: 0.8358736752426323; --w: 6; --group: 2;"></div>
<div class="star" style="--posX: 4; --posY: 2; --alpha: 0.7131704443788052; --w: 10; --group: 2;"></div>
<div class="star" style="--posX: 66; --posY: 26; --alpha: 0.4059326364318585; --w: 10; --group: 3;"></div>
<div class="star" style="--posX: 61; --posY: -2; --alpha: 0.6584218262172403; --w: 5; --group: 3;"></div>
<div class="star" style="--posX: 21; --posY: 12; --alpha: 0.9182732089624193; --w: 6; --group: 3;"></div>
<div class="star" style="--posX: -2; --posY: 2; --alpha: 0.1842126574729792; --w: 2; --group: 4;"></div>
<div class="star" style="--posX: 47; --posY: 19; --alpha: 0.7823805669540616; --w: 11; --group: 4;"></div>
<div class="star" style="--posX: 39; --posY: -13; --alpha: 0.8965687486553502; --w: 6; --group: 2;"></div>
<div class="star" style="--posX: 58; --posY: 32; --alpha: 0.5813138519834893; --w: 4; --group: 3;"></div>
<div class="star" style="--posX: 7; --posY: -10; --alpha: 0.2130805260708013; --w: 10; --group: 4;"></div>
<div class="star" style="--posX: 69; --posY: -4; --alpha: 0.6730278973735275; --w: 7; --group: 2;"></div>
<div class="star" style="--posX: 80; --posY: -4; --alpha: 0.7992177972610697; --w: 10; --group: 4;"></div>
<div class="star" style="--posX: 69; --posY: 29; --alpha: 0.5781399258683753; --w: 4; --group: 4;"></div>
<div class="star" style="--posX: 37; --posY: -2; --alpha: 0.09450283048735453; --w: 7; --group: 3;"></div>
<div class="star" style="--posX: 25; --posY: 23; --alpha: 0.5399503769634986; --w: 7; --group: 2;"></div>
<div class="star" style="--posX: 21; --posY: 5; --alpha: 0.7832193226202111; --w: 6; --group: 2;"></div>
<div class="star" style="--posX: 1; --posY: -17; --alpha: 0.7870066218342366; --w: 7; --group: 2;"></div>
<div class="star" style="--posX: 59; --posY: 35; --alpha: 0.4688113809771659; --w: 7; --group: 2;"></div>
<div class="star" style="--posX: 48; --posY: 34; --alpha: 0.4106872345134276; --w: 2; --group: 2;"></div>
<div class="star" style="--posX: 75; --posY: -16; --alpha: 0.8479330307179747; --w: 3; --group: 2;"></div>
<div class="star" style="--posX: 2; --posY: -6; --alpha: 0.6723955019333057; --w: 2; --group: 4;"></div>
<div class="star" style="--posX: 37; --posY: 12; --alpha: 0.25660751039365226; --w: 8; --group: 2;"></div>
<div class="star" style="--posX: 69; --posY: 35; --alpha: 0.6312120414354403; --w: 10; --group: 2;"></div>
<div class="star" style="--posX: 75; --posY: 0; --alpha: 0.6299587787613163; --w: 8; --group: 2;"></div>
<div class="star" style="--posX: -15; --posY: 7; --alpha: 0.16190777493809416; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: 60; --posY: 15; --alpha: 0.027326023305829894; --w: 9; --group: 4;"></div>
<div class="star" style="--posX: 69; --posY: 16; --alpha: 0.4306478425663989; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: 60; --posY: 20; --alpha: 0.028869287942872468; --w: 8; --group: 3;"></div>
<div class="star" style="--posX: 19; --posY: -3; --alpha: 0.07721542803590631; --w: 5; --group: 4;"></div>
<div class="star" style="--posX: -6; --posY: 21; --alpha: 0.019228760499082398; --w: 7; --group: 2;"></div>
<div class="star" style="--posX: 24; --posY: -14; --alpha: 0.663516813694581; --w: 11; --group: 2;"></div>
<div class="star" style="--posX: -5; --posY: -4; --alpha: 0.9832384652897441; --w: 4; --group: 4;"></div>
<div class="star" style="--posX: -6; --posY: 4; --alpha: 0.26657174504584913; --w: 11; --group: 3;"></div>
<div class="star" style="--posX: 44; --posY: 24; --alpha: 0.1049990735765276; --w: 2; --group: 2;"></div>
<div class="star" style="--posX: 64; --posY: -3; --alpha: 0.5196041539201872; --w: 9; --group: 4;"></div>
<div class="star" style="--posX: 71; --posY: 7; --alpha: 0.7067092984584951; --w: 9; --group: 2;"></div>
<div class="star" style="--posX: 81; --posY: -15; --alpha: 0.12841414655148164; --w: 4; --group: 3;"></div>
<div class="star" style="--posX: 18; --posY: 4; --alpha: 0.7119072475662334; --w: 2; --group: 3;"></div>
<div class="star" style="--posX: 32; --posY: 3; --alpha: 0.7581550602014033; --w: 5; --group: 2;"></div>
<div class="star" style="--posX: 51; --posY: 36; --alpha: 0.003069155875218721; --w: 8; --group: 3;"></div>
<div class="star" style="--posX: 43; --posY: -13; --alpha: 0.1429204203882355; --w: 2; --group: 2;"></div>
<div class="star" style="--posX: -3; --posY: -4; --alpha: 0.15835116859804654; --w: 5; --group: 3;"></div>
<div class="star" style="--posX: 77; --posY: 38; --alpha: 0.5513030466615148; --w: 8; --group: 2;"></div>
<div class="star" style="--posX: 81; --posY: 7; --alpha: 0.9939980492413065; --w: 3; --group: 2;"></div>
<div class="star" style="--posX: -16; --posY: 41; --alpha: 0.27551584967244636; --w: 7; --group: 3;"></div>
<div class="star" style="--posX: 66; --posY: 30; --alpha: 0.7222509785131608; --w: 10; --group: 2;"></div>
<div class="star" style="--posX: 56; --posY: 19; --alpha: 0.41804626524305255; --w: 8; --group: 4;"></div>
<div class="star" style="--posX: 13; --posY: -9; --alpha: 0.04968900968989587; --w: 5; --group: 4;"></div>
<div class="star" style="--posX: 22; --posY: 9; --alpha: 0.9179235156683998; --w: 9; --group: 4;"></div>
<div class="star" style="--posX: 67; --posY: 40; --alpha: 0.2032951638871734; --w: 3; --group: 3;"></div>
<div class="star" style="--posX: 23; --posY: 4; --alpha: 0.10265210956015913; --w: 3; --group: 3;"></div>
<div class="star" style="--posX: 76; --posY: 17; --alpha: 0.5906209535110365; --w: 5; --group: 3;"></div>
<div class="star" style="--posX: 67; --posY: 31; --alpha: 0.3095488243748006; --w: 3; --group: 4;"></div>
<div class="star" style="--posX: -2; --posY: 18; --alpha: 0.3648219356931186; --w: 3; --group: 3;"></div>
<div class="star" style="--posX: 13; --posY: -14; --.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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