div+css布局实现宇航员月球行走动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css布局实现宇航员月球行走动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background: #080808;
overflow: hidden;
background-image: radial-gradient(1px 1px at 5% 98%, #ffffff, #fff0),
radial-gradient(1px 1px at 18% 79%, #ffffff, #fff0),
radial-gradient(2px 1px at 26% 52%, #ffffff, #fff0),
radial-gradient(1px 2px at 31% 20%, #e6e6e6, #fff0),
radial-gradient(1px 1px at 41% 44%, #e8e8e8, #fff0),
radial-gradient(1px 2px at 47% 6%, #ffffff, #fff0),
radial-gradient(1px 1px at 50% 71%, #f5f5f5, #fff0),
radial-gradient(2px 1px at 65% 50%, #e2e2e2, #fff0),
radial-gradient(1px 1px at 54% 26%, #ffffff, #fff0),
radial-gradient(2px 2px at 76% 34%, #efefef, #fff0),
radial-gradient(1px 1px at 10% 32%, #ececec, #fff0),
radial-gradient(1px 2px at 84% 60%, #ffffff, #fff0),
radial-gradient(1px 1px at 87% 13%, #eaeaea, #fff0),
radial-gradient(1px 1px at 69% 21%, #efefef, #fff0),
radial-gradient(1px 2px at 62% 83%, #efefef, #fff0),
radial-gradient(2px 1px at 81% 74%, #efefef, #fff0),
radial-gradient(1px 1px at 36% 62%, #efefef, #fff0),
radial-gradient(1px 1px at 94% 68%, #efefef, #fff0),
radial-gradient(2px 1px at 98% 50%, #efefef, #fff0),
radial-gradient(1px 1px at 95% 21%, #efefef, #fff0),
linear-gradient(45deg, #000 5%, #000313 65%, #111 100%);
background-repeat: repeat;
background-size: 25% 25%, 33.33% 33.33%, 50% 50%, 20% 20%, 33.33% 33.33%,
25% 18%, 33.33% 19%, 33.33% 21%, 23% 27%, 27.33% 35.33%, 18.33% 32.33%,
28.33% 34.33%, 33.33% 30.33%, 25.33% 29.33%, 29.33% 31.33%, 20.33% 29.33%,
30.33% 27.33%, 22.33% 33.33%, 15.33% 32.33%, 33.33% 22.33%, 100% 100%;
}
*:before,
*:after {
content: "";
position: absolute;
}
body::before {
width: 15vmax;
height: 15vmax;
background: radial-gradient(circle at 50% 100%, #000 0 50%, #fff0),
radial-gradient(circle at 121% 39%, green 0 18%, #fff0 20%),
radial-gradient(ellipse at 111% 26%, green 0 18%, #fff0 20%),
radial-gradient(ellipse at 100% 15%, green 0 18%, #fff0 20%),
radial-gradient(circle at 38% -15%, #ffffffb3 0 16%, #fff0 20%),
radial-gradient(circle at 50% 100%, #000 0 50%, #008eff);
border-radius: 100%;
left: 10vmax;
top: 10vmax;
box-shadow: 0 -0.5vmax 1vmax -0.25vmax #9999ff45;
}
.moon {
position: absolute;
width: 250vmax;
height: 100vmax;
z-index: 1;
border-radius: 100%;
background: radial-gradient(
circle at 50% 50%,
#fdfdfd 0% 5vmax,
#ffffff00 10vmax 100%
),
#fff;
box-shadow: 0 0 10vmax 1vmax #6493a9, 0 0 5vmax 5vmax #adadad80 inset,
0 0 2vmax 1vmax #fdfdfd;
left: calc(50% - 125vmax);
top: 45vmax;
}
.moon:before {
content: "";
background: radial-gradient(
circle at 100% 60%,
#ffffff00 0% 60%,
#dddddd 75% 100%
);
width: 100%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
border-radius: 100%;
}
.crater {
content: "";
position: absolute;
width: 25vmax;
height: 20vmax;
border-radius: 100%;
transform: rotateX(50deg) rotateY(-10deg) rotateZ(15deg);
border: 1px dotted #404040;
background: linear-gradient(225deg, #000000, #eaeaea99);
box-shadow: 0 0 3vmax 1vmax #585858, 0 0 0.5vmax 0.5vmax #5d5d5d,
2vmax 5vmax 5.5vmax 3.5vmax #484848, 0 0 5vmax 0.5vmax #444444,
1vmax 3.5vmax 1.5vmax 0.5vmax #ababab;
left: calc(50% - 25vmax);
opacity: 0.35;
bottom: calc(50% + 25vmax);
}
.astronaut {
width: 20vmax;
height: 30vmax;
right: -22%;
position: absolute;
top: 30vmax;
z-index: 2;
background-size: 100%;
background-position: center top;
/*transform: scale(2);*/
animation: walk 20s cubic-bezier(0.05, -0.01, 0.61, 0.99) 0s infinite,
walk-up 5s cubic-bezier(0.35, 0.14, 1, 1) 1.5s infinite;
margin-top: -10%;
}
@keyframes walk {
0% {
right: -20%;
}
20% {
right: 10%;
}
45% {
right: 40%;
}
70% {
right: 70%;
}
100% {
right: 100%;
}
}
@keyframes walk-up {
0%,
100% {
top: 30vmax;
}
10%,
90% {
top: 31vmax;
}
50% {
top: 35vmax;
}
}
.astronaut * {
position: absolute;
}
.backpack {
background: linear-gradient(
91deg,
#343535 0% 55%,
#4b4e50 58% 75%,
#6e7071 77% 88%,
#c6c6c6 92% 100%
);
width: 30%;
height: 38%;
left: 57%;
top: 20%;
border-radius: 10% 17% 60% 10%;
border-top: 0.2vmax solid #4b4e50;
}
.head {
background: #b8b8b8;
width: 46%;
height: 27%;
border-radius: 50%;
left: 31%;
top: 4%;
/* opacity: 0.5; */
border-bottom: 1vmax solid #9b9b9b;
transform: rotate(-4deg);
z-index: 3;
}
.head:before {
/*background: #8bc34a85; */
width: 75%;
height: 69%;
border-radius: 50% 50% 0 0;
left: 9%;
top: 3%;
border-top: 0.65vmax solid #c6c6c6;
border-right: 0.15vmax solid transparent;
border-left: 0.15vmax solid transparent;
transform: rotate(9deg);
}
.head:after {
background: radial-gradient(
circle at 45% 25%,
#2b2b2b 0 57%,
#252525 58% 100%
);
width: 80%;
height: 83%;
border-radius: 50%;
left: 5%;
top: 13%;
border: 0.25vmax solid #000;
box-sizing: border-box;
}
.helmet {
background: radial-gradient(circle at 8% 33%, #343434 0 5%, #fff0 6% 100%),
radial-gradient(circle at 94% 42%, #343434 0 5%, #fff0 6% 100%),
radial-gradient(circle at 25% 75%, #2b2b2b 0 35%, #fff0 36% 100%),
radial-gradient(circle at 35% 70%, #2b2b2b 0 35%, #fff0 36% 100%),
radial-gradient(circle at 45% 67%, #2b2b2b 0 35%, #fff0 36% 100%),
radial-gradient(circle at 55% 69%, #2b2b2b 0 35%, #fff0 36% 100%),
radial-gradient(circle at 65% 77%, #2b2b2b 0 35%, #fff0 36% 100%),
radial-gradient(circle at 75% 87%, #2b2b2b 0 35%, #fff0 36% 100%),
radial-gradient(circle at 85% 96%, #2b2b2b 0 35%, #fff0 36% 100%),
radial-gradient(circle at 96% 49%, #2b2b2b 0 5%, #fff0 6% 100%),
radial-gradient(circle at 4% 40%, #2b2b2b 0 5%, #fff0 6% 100%);
width: 50%;
height: 50%;
border-radius: 100%;
z-index: 3;
left: 15%;
top: 22%;
transform: rotate(-16deg);
color: #343434;
color: #5d5d5d;
background-color: #343434;
}
.helmet:before {
background: #343434;
width: 98%;
height: 36%;
border-radius: 100%;
left: 2%;
top: 25%;
transform: rotate(5deg);
}
.helmet:after {
background: #5d5d5d;
width: 18%;
height: 16%;
border-radius: 100%;
left: 58%;
top: 14%;
transform: rotate(27deg);
box-shadow: -1.15vmax 0.35vmax 0vmax -0.2vmax #7a7a7a,
-1.05vmax 0.25vmax 0vmax -0.2vmax #7a7a7a;
}
.neck {
background: radial-gradient(
circle at 43.95% 15%,
transparent 0 61%,
#666b6e 62% 100%
);
width: 48%;
height: 10%;
top: 17%;
left: 30%;
border-radius: 50% 50% 100% 100%;
transform: rotate(5deg);
z-index: 3;
}
.neck:before,
.neck:after {
background: linear-gradient(
177deg,
#fff0 0 32%,
#9a9a9a 35% 40%,
#fff0 50% 100%
),
#676c6f;
width: 80%;
height: 100%;
left: -44%;
border-radius: 75% 35% 75% 100%;
transform: rotate(15deg);
top: -27%;
opacity: 0;
}
.neck:after {
left: 60%;
transform: rotateY(180deg) rotateZ(10deg);
top: -15%;
border-radius: 40% 35% 75% 100%;
background: linear-gradient(
179deg,
#fff0 0 30%,
#9a9a9a 35% 45%,
#fff0 47% 100%
),
#676c6f;
}
.body {
background: #c6c6c6;
width: 45%;
height: 30%;
left: 32%;
top: 31%;
border-radius: 19% 23% 34% 37%;
transform: rotate(-1deg);
z-index: 2;
border-right: 2vmax solid #888d90;
box-sizing: border-box;
/* opacity: 0; */
border-bottom: 1vmax solid #888d90;
}
.body::before {
background: radial-gradient(circle at 74% 30%, red 0 11%, #fff0 12% 100%),
radial-gradient(circle at 75% 65%, red 0 10%, #fff0 12% 100%),
radial-gradient(circle at 75% 31%, #790000 0 11%, #fff0 12% 100%),
radial-gradient(circle at 76% 66%, #6f0000 0 10%, #fff0 12% 100%), #d7d7d7;
width: 65%;
height: 41%;
border-radius: 20%;
top: 15%;
left: 19%;
transform: rotate(3deg);
border-right: 0.25vmax solid #b1b1b1;
border-bottom: 0.25vmax solid #adadad;
bo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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