div+css布局实现宇航员月球行走动画效果代码-html代码-BFW代码库

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