css实现宇航员登月效果代码-html代码-BFW代码库

css实现宇航员登月效果代码

代码语言：html

代码描述：css实现宇航员登月效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.man-on-moon {
    background-color: #2e2926;
    width: 100vmin;
    height: 100vmin;
    position: relative;
}

.sky {
    background: rgba(46, 45, 45, 0.377);
    width: 100vmin;
    height: 100vmin;
    position: relative;
    /* z-index: -2; */
}

.moon {
    height: 50vmin;
    width: 100vmin;
    border-radius: 50%;
    position: relative;
    background: #e9e8d2;
    bottom: -85%;
    clip-path: inset(0 0 70% 0);
}
.man {
    /* background: red; */
    width: 9vmin;
    height: 15vmin;
    position: absolute;
    bottom: 16vmin;
    left: 45vmin;
}
.foot {
    position: absolute;
    bottom: -1.5vmin;
    left: 24%;
    transform: translate(-50%, -50%);
    height: 2.2vmin;
    width: 4.4vmin;
    border-radius: 150px 150px 0 0;
    background-color: #b8b49b;
    box-shadow: 4.5vmin 0 0 0 #b8b49b;
}

.leg1 {
    width: 4.4vmin;
    height: 4.4vmin;
    background: #b8b49b;
    background: radial-gradient(
            circle 20px at -20% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        ),
        radial-gradient(
            circle 20px at 120% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        );
    background-size: 2.2vmin 4.4vmin, 2.2vmin 4.4vmin;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    position: absolute;
    bottom: 0.5vmin;
}

.leg2 {
    width: 4.4vmin;
    height: 4.4vmin;
    background: #b8b49b;
    background: radial-gradient(
            circle 20px at -20% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        ),
        radial-gradient(
            circle 20px at 120% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        );
    background-size: 2.2vmin 4.4vmin, 2.2vmin 4.4vmin;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    position: absolute;
    bottom: 0.5vmin;
    left: 4.5vmin;
}

.leg1-upper {
    position: absolute;
    background: #b8b49b;
    width: 4.4vmin;
    left: 0vmin;
    height: 8vmin;
    bottom: 2.6vmin;
}

.leg2-upper {
    position: absolute;
    background: #b8b49b;
    width: 4.4vmin;
    left: 4.5vmin;
    height: 8vmin;
    bottom: 2.6vmin;
}

.stmock {
    background: #b8b49b;
    width: 100%;
    height: 7vmin;
    position: absolute;
    top: 4vmin;
}

.chest {
    background: #b8b49b;
    width: 120%;
    height: 8vmin;
    position: absolute;
    border-radius: 50% 50% 0 0;
    left: -1vmin;
    z-index: 1;
}

.head {
    position: absolute;
    height: 11vmin;
    width: 11vmin;
    border-radius: 50%;
    background: #2e2b29;
    top: -8vmin;
    left: -1vmin;
    border: 0.5vmin solid #2e2b29;
    box-shadow:inset 0 1.2vmin 0 0 #b8b49b,
    inset 0 -1vmin 0 0 #b8b49b;
    z-index: 1;
}

.hand1{
    background: #b8b49b;
    position:absolute;
    height:8vmin;
    width: 2.6vmin;
    border-radius: 0 2vmin 2vmin 2vmin;
    transform: rotate(30deg);
    left:-2.7vmin;
    top: 2.5vmin;
}
.h.........完整代码请登录后点击上方下载按钮下载查看