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