gsap实现宇航员太空行走动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现宇航员太空行走动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
:root {
        --space-bg: #3e5380;
        --moon-bg: #e0ebf1;
        --moon-craters: #cedfeb;
        --shoe: #cedfeb;
        --suit-base: #e7eef1;
        --suit-neck: #eff6f7;
        --suit-sheild: #3d5989;
        --backpack: #cedfeb;
        --radar-light: #c96281;
    }

        * {
            margin: 0;
            border: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .space {
            height: 400px;
            width: 400px;
            border-radius: 50%;
            position: relative;
            background-color: var(--space-bg);
            background-image: radial-gradient(10px circle at 52px 130px, white 8px, transparent), radial-gradient(6px circle at 92px 200px, white 4px, transparent), radial-gradient(3px circle at 52px 295px, white 1px, transparent), radial-gradient(3px circle at 220px 50px, white 1px, transparent), radial-gradient(6px circle at 300px 140px, white 4px, transparent), radial-gradient(5px circle at 350px 220px, white 3px, transparent), radial-gradient(3px circle at 370px 257px, white 1px, transparent);
        }

        .moon {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            left: 5%;
            background-color: var(--moon-bg);
            background-image: radial-gradient(25px circle at 35px 35px, #cedfeb 23px, transparent), radial-gradient(18px circle at 60px 80px, #cedfeb 15px, transparent), radial-gradient(10px circle at 80px 30px, #cedfeb 9px, transparent);
        }

        .landing {
            width: 600px;
            height: 100px;
            position: relative;
            top: -20px;
            background: white;
        }

        .landing::before {
            content: "";
            position: absolute;
            height: 20px;
            width: 100px;
            border-radius: 20%;
            background: #e7eef1;
            top: 20px;
            left: 250px;
        }

        .astronaut {
            width: 200px;
            height: 300px;
            position: relative;
            top: 21%;
            left: 23%;
            z-index: 10;
            filter: blur(0.25px);
            perspective: 500px;
        }

        .head {
            position: absolute;
            left: 50px;
            top: -8px;
            height: 120px;
            width: 120px;
            border-radius: 50%;
            background: var(--suit-base);
        }

        .head::before {
            content: '';
            position: absolute;
            right: 0;
            top: 20px;
            height: 80px;
            width: 78px;
            background-color: var(--suit-sheild);
            border-radius: 50%;
        }

        .neck {
            position: absolute;
            top: 100px;
            left: 70px;
            height: 20px;
            width: 80px;
            border-radius: 10px;
            background: var(--suit-neck);
            z-index: 5;
        }

        .body {
            position: absolute;
            top: 115px;
            left: 60px;
            height: 110px;
            width: 100px;
            border-radius: 30px;
            background-color: var(--suit-base);
            z-index: 3;
        }

        .emblem {
            position: absolute;
            top: 12px;
            left: 50px;
            width: 45px;
            height: 50px;
            background: linear-gradient(#e1566a, #e1566a) 15px 0px/10px 6px no-repeat, radial-gradient(10px circle at 22px 30px, var(--suit-base) 9px, transparent), radial-gradient(20px 16px ellipse at 22px 30px, var(--backpack) 20px, transparent);
        }

        .backpack {
            position: absolute;
            left: 21px;
            top: 130px;
            height: 80px;
            width: 40px;
            background: var(--backpack);
            border-radius: 15px;
            z-index: -1;
        }

        .backpack::before {
            content: "";
            position: relative;
            display: block;
            left: 11px;
            top: -35px;
            height: 18px;
            width: 18px;
            background: var(--radar-light);
            border-radius: 50%;
        }

        .backpack::after {
            content: "";
            position: relative;
            display: block;
            left: 18px;
            top: -35px;
            height: 18px;
            width: 4px;
            background: var(--backpack);
        }

        .leg {
            position: absolute;
            width: 70px;
            height: 150px;
        }

        .upper-leg {
            width: 40px;
            height: 55%;
            border-radius: 20px;
            transform: rotate(-20deg);
            transform-origin: top center;
        }

        .lower-leg {
            position: absolute;
            top: 45px;
            left: 30px;
            width: 40px;
            height: 55%;
            border-radius: 20px;
            transform: rotate(10deg) translateX(-5px);
            transform-origin: top center;
            background: linear-gradient(-10deg, transparent 30%, var(--shoe) 31%, var(--shoe) 84%, transparent 85%) 0px 20px/40px 20px no-repeat, radial-gradient(25px circle at 23px 70px, var(--shoe) 25px, transparent);
        }

        .lower-leg::before {
            content: '';
            position: absolute;
            top: 65px;
            left: -5px;
            width: 55px;
            height: 23px;
            border-radius: 20px;
            transform: rotate(-5deg);
            background: var(--shoe);
        }

        .right-leg {
            top: 190px;
            left: 75px;
            z-index: 2;
            transform: rotate(-50deg) translateY(25px);
        }
        .right-leg .upper-leg {
            background: #e7edf0;
        }
        .right-leg .lower-leg {
            background-color: #e7edf0;
            transform: rotate(40deg) translate(3px, 2px);
        }

        .left-leg {
            top: 190px;
            left: 80px;
            z-index: 1;
            transform: rotate(50deg) translateY(-15px);
        }
        .left-leg .upper-leg {
            background: #dbe3ea;
        }
        .left-leg .lower-leg {
            background-color: #dbe3ea;
        }

        .hand {
            position: relative;
            width: 60px;
       .........完整代码请登录后点击上方下载按钮下载查看