div+css实现卡通女宇航员交互动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现卡通女宇航员交互动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
width: 100%; height: 100vh;
margin: 0;
}
.scene {
position: relative;
max-width: 100vw; max-height: 100vh;
overflow: hidden;
aspect-ratio: 4 / 3;
margin: auto;
z-index: 1;
background: radial-gradient(ellipse, rgb(222 133 82 / 30%), transparent 48%) -7vh 72vh / 110% 25% no-repeat, radial-gradient(ellipse, rgb(222 133 82 / 30%), transparent 48%) 83vh 52vh / 110% 25% no-repeat, radial-gradient(ellipse, rgb(222 133 82 / 30%), transparent 48%) -320% 30% / 110% 19% no-repeat, radial-gradient(ellipse at 30% 10%, #884f45, #ca845c 20%, transparent 70%) 0 -20% / 90% 49% no-repeat, radial-gradient(ellipse at 30% 40%, rgb(220 164 141 / 60%) 20%, transparent 48%) -20% -10% / 50% 69% no-repeat, linear-gradient(30deg, transparent, rgb(155 93 83 / 70%) 70%, rgb(210 152 133 / 70%)), linear-gradient(10deg, #51131f, #8b2b3c 40%, #72222c);
--noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
--animation: 4.2s linear infinite;
}
.scene *, .scene::before, .scene::after, .scene *::before, .scene *::after {
position: absolute;
content: '';
transform-origin: top left;
}
.scene::before {
top: 0; left: 0;
width: 100%; height: 100%;
background: radial-gradient(circle, rgb(255 147 7 / 100%), rgba(255 147 7 / 0) 60%) center 32% / 0% 0% no-repeat;
mix-blend-mode: overlay;
z-index: 1;
animation: sceneShine var(--animation);
}
@keyframes sceneShine {
100% { background-position: center 72%;
background-size: 150% 150%;
opacity: 0.4; }
76.0% { background-position: center 72%;
background-size: 150% 150%;
opacity: 0.4; }
48.8% { background-position: center 32%;
background-size: 20% 20%;
opacity: 0; }
00.0% { background-position: center 32%;
background-size: 20% 20%;
opacity: 0; }
}
.scene::after {
top: 0; left: 0;
width: 100%; height: 100%;
background: var(--noise-3) 0 / 20vh repeat;
mix-blend-mode: overlay;
z-index: 1;
}
.person {
bottom: 0; left: 50%;
}
.person::before {
/* left shoulderpad */
top: -43.9vh; left: 9vh;
width: 17.3vh; height: 20vh;
background: linear-gradient(45deg, #3d517e, #33446b);
border-radius: 30% 70% 20% 20% / 17% 80% 20% 20%;
z-index: -1;
animation: leftShoulderpad var(--animation);
}
@keyframes leftShoulderpad {
/* 86 - 74 */
100% { transform: translate(0vh, 0vh) rotate(-6deg); }
86.0% { transform: translate(0vh, 0vh) rotate(-6deg); }
/* 68 */
79.1% { transform: translate(0vh, 0vh) rotate(-4deg); }
/* 60 - 49 */
69.8% { transform: translate(-3vh, -0.8vh) rotate(-4deg); }
57.0% { transform: translate(-3vh, -0.8vh) rotate(-4deg); }
/* 42 - 0 */
48.8% { transform: translate(-3.1vh, 1.2vh) rotate(-4deg); }
00.0% { transform: translate(-3.1vh, 1.2vh) rotate(-4deg); }
}
.person__lefttarm {
top: -21vh; left: -33vh;
width: 16vh; height: 26vh;
background: #e9d3b8;
border-radius: 10vh 10vh 0 0;
transform-origin: top center;
animation: leftArm var(--animation);
}
@keyframes leftArm {
/* 86 - 74 */
100% { transform: translate(0vh, 0vh) rotate(4deg); }
86.0% { transform: translate(0vh, 0vh) rotate(4deg); }
/* 68 */
79.1% { transform: translate(0.9vh, -0.3vh) rotate(4deg); }
/* 60 */
69.8% { transform: translate(5.3vh, 0.3vh) rotate(6deg); }
/* 58 */
67.4% { transform: translate(6.1vh, 1.8vh) rotate(6deg); }
/* 57 - 49 */
66.3% { transform: translate(6.6vh, 2.2vh) rotate(7deg); }
57.0% { transform: translate(6.6vh, 2.2vh) rotate(7deg); }
/* 42 */
48.8% { transform: translate(7.4vh, 2.7vh) rotate(8deg); }
/* 34 */
39.5% { transform: translate(10.5vh, 2.7vh) rotate(12deg); }
/* 32 */
37.2% { transform: translate(12.6vh, 2.7vh) rotate(14deg); }
/* 29 - 10 */
33.7% { transform: translate(12.9vh, 2.7vh) rotate(14deg); }
11.6% { transform: translate(12.9vh, 2.7vh) rotate(14deg); }
/* 3 */
03.5% { transform: translate(11.6vh, 2.6vh) rotate(7deg); }
/* 0 */
00.0% { transform: translate(11.8vh, 2.6vh) rotate(7deg); }
}
.person__lefttarm::before {
top: -3.4vh; left: -1vh;
width: 18.6vh; height: 26vh;
background: radial-gradient(ellipse, #f6413f 32%, transparent calc(32% + 1px)) -36% 71% / 70% 97% no-repeat, linear-gradient(#33446b, #3c5180);
border-radius: 60% 40% 40% 60% / 50% 50% 50% 50%;
animation: leftArmBefore var(--animation);
}
@keyframes leftArmBefore {
/* 86 - 68 */
100% { background-position: -36% 71%, 0 0;
background-size: 70% 97%, 100% 100%;
transform: translate(0vh, 0vh) scale(1, 1); }
79.1% { background-position: -36% 71%, 0 0;
background-size: 70% 97%, 100% 100%;
transform: translate(0vh, 0vh) scale(1, 1); }
/* 60 */
69.8% { background-position: -29% 113%, 0 0;
background-size: 82% 97%, 100% 100%;
transform: translate(0vh, 0vh) scale(1.05, 0.98); }
/* 58 */
67.4% { background-position: -61% 113%, 0 0;
background-size: 89% 97%, 100% 100%;
transform: translate(0vh, 0vh) scale(1.06, 0.98); }
/* 57 - 42 */
66.3% { background-position: -61% 244%, 0 0;
background-size: 90% 97%, 100% 100%;
transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
48.8% { background-position: -61% 244%, 0 0;
background-size: 90% 97%, 100% 100%;
transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
/* 34 */
39.5% { background-position: -111% 194%, 0 0;
background-size: 97% 97%, 100% 100%;
transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
/* 32 - 0 */
37.2% { background-position: -0.7vh 1.1vh, 0 0;
background-size: 101% 97%, 100% 100%;
transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
00.0% { background-position: -0.7vh 1.1vh, 0 0;
background-size: 101% 97%, 100% 100%;
transform: translate(0vh, 0.1vh) scale(1.07, 0.97); }
}
.person__rightarm {
top: -43vh; left: 8vh;
width: 12.8vh; height: 48.8vh;
background: linear-gradient(-3deg, #dab486 calc(18vh - 1px), #f9413d 18vh, #f9413d 21vh, #e9d3b8 calc(21vh + 1px), #dcb98e);
border-radius: 2vh 9vh 6.5vh 6.5vh;
transform-origin: top center;
z-index: -1;
animation: rightArm var(--animation);
}
@keyframes rightArm {
/* 86 - 74 */
100% { transform: translate(0vh, 0vh) rotate(-19deg); }
86.0% { transform: translate(0vh, 0vh) rotate(-19deg); }
/* 68 */
79.1% { transform: translate(-0.5vh, 0vh) rotate(-20deg); }
/* 60 */
69.8% { transform: translate(-4.3vh, -0.7vh) rotate(-25deg); }
/* 58 */
67.4% { transform: translate(-5.3vh, 0.2vh) rotate(-27deg); }
/* 57 - 49 */
66.3% { transform: translate(-5.8vh, 0.4vh) rotate(-28deg); }
57.0% { transform: translate(-5.8vh, 0.4vh) rotate(-28deg); }
/* 42 */
48.8% { transform: translate(-6.3vh, 1.6vh) rotate(-32deg); }
/* 34 */
39.5% { transform: translate(-8.3vh, 4.3vh) rotate(-55deg); }
/* 32 */
37.2% { transform: translate(-9.2vh, 4.9vh) rotate(-67deg); }
/* 29 - 25 */
33.7% { transform: translate(-9.2vh, 4.9vh) rotate(-68deg); }
29.1% { transform: translate(-9.2vh, 4.9vh) rotate(-68deg); }
/* 23 */
26.7% { transform: translate(-9.2vh, 5.1vh) rotate(-68deg); }
/* 10 - 3 */
11.6% { transform: translate(-9.2vh, 5.2vh) rotate(-66deg); }
03.5% { transform: translate(-9.2vh, 5.2vh) rotate(-66deg); }
/* 0 */
00.0% { transform: translate(-9.8vh, 4vh) rotate(-61deg); }
}
.person__rightarm::before {
top: 36vh; left: 0vh;
width: 12.8vh; height: 55vh;
background: linear-gradient(-139deg, transparent calc(30% - 1px), #3c5180 30%) 0vh 19vh / 5vh 21vh no-repeat, linear-gradient(-174deg, transparent calc(38vh - 1px), #3c5180 38vh), linear-gradient(-173deg, transparent calc(12.3vh - 1px), #3c5180 12.3vh, #3c5180 12.6vh, transparent calc(12.6vh + 1px)), linear-gradient(-173deg, transparent calc(11.3vh - 1px), #3c5180 11.3vh, #3c5180 11.6vh, transparent calc(11.6vh + 1px)), linear-gradient(-173deg, transparent calc(10.3vh - 1px), #3c5180 10.3vh, #3c5180 10.6vh, transparent calc(10.6vh + 1px)), linear-gradient(#dab486 20%, #e9d3b8);
border-radius: 7vh;
transform-origin: 6.4vh 6.4vh;
animation: rightArmBefore var(--animation);
}
@keyframes rightArmBefore {
/* 86 - 74 */
100% { transform: rotate(-40deg); }
86.0% { transform: rotate(-40deg); }
/* 68 */
79.1% { transform: rotate(-41deg); }
/* 60 */
69.8% { transform: rotate(-46deg); }
/* 58 */
67.4% { transform: rotate(-47deg); }
/* 57 - 49 */
66.3% { transform: rotate(-50deg); }
57.0% { transform: rotate(-50deg); }
/* 42 */
48.8% { transform: rotate(-54deg); }
/* 34 */
39.5% { transform: rotate(-73deg); }
/* 32 - 23 */
37.2% { transform: rotate(-70deg); }
26.7% { transform: rotate(-70deg); }
/* 10 - 3 */
11.6% { transform: rotate(-66deg); }
03.5% { transform: rotate(-66deg); }
/* 0 */
00.0% { transform: rotate(-61deg); }
}
.person__body {}
.person__body::before {
top: -30vh; left: -28.7vh;
width: 37vh; height: 49vh;
background: linear-gradient(123deg, #fdf6eb 46.9vh, transparent calc(46.9vh + 1px));
border-radius: 50% 0 0 0;
transform-origin: top center;
animation: bodyBefore var(--animation);
}
@keyframes bodyBefore {
/* 86 - 74 */
100% { transform: translate(0vh, 0vh) rotate(-27deg) scale(1, 1); }
86.0% { transform: translate(0vh, 0vh) rotate(-27deg) scale(1, 1); }
/* 68 */
79.1% { transform: translate(0vh, 0vh) rotate(-27deg) scale(0.98, 1); }
/* 60 */
69.8% { transform: translate(1.1vh, 0vh) rotate(-27deg) .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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