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

gsap实现宇航员太空行走动画效果

代码语言：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;
           .........完整代码请登录后点击上方下载按钮下载查看