div+css实现夜晚月亮下飞龙在天动画效果代码-html代码-BFW代码库

div+css实现夜晚月亮下飞龙在天动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现夜晚月亮下飞龙在天动画效果代码，一直黑色的飞龙在月色下展翅飞翔

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

<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
        background:#038 linear-gradient(#014,transparent) no-repeat;
        background-size:100% 75vh;
        overflow:hidden
    }
    #moon {
        background:white;
        border-radius:50%;
        margin:20px auto;
        width:240px;
        height:240px
    }
    .cloud {
        background:rgba(0,0,0,0.3);
        border-radius:50%;
        position:absolute;
        right:-200px
    }
    .cloud.one {
        top:20%;
        width:100px;
        height:20px;
        animation:cloudShift 10s linear infinite
    }
    .cloud.two {
        top:50%;
        width:200px;
        height:40px;
        animation:cloudShift 3s linear infinite
    }
    .cloud.three {
        top:80%;
        width:150px;
        height:30px;
        animation:cloudShift 6s linear infinite
    }
    #dragon {
        top:33%;
        left:0;
        right:0;
        position:absolute;
        height:100px;
        width:400px;
        margin:auto;
        animation:bounce 1s infinite
    }
    #front,#head,#eye,#neck,#body,#armL,#armR,.hand,#wingL,#wingR,#legL,#legR,.foot,#tail,#outer,#inner,#tip {
        position:absolute
    }
    #front {
        left:265px;
        width:85px;
        transform-origin:0 50%;
        animation:rotHead 1s infinite
    }
    #front #head {
        background:#002;
        border-radius:0 60px 25px 65px;
        width:65px;
        height:40px;
        top:30px;
        left:70px;
        transform-origin:0 50%;
        animation:rotHead 1s infinite;
        z-index:2
    }
    #front #head #eye {
        background:#dd0;
        border-radius:0 100%;
        top:8px;
        left:30px;
        width:20px;
        height:12px
    }
    #front #neck {
        background:#002;
        width:90px;
        height:20px;
        top:40px;
        z-index:1
    }
    #body {
        background:#002;
        border-radius:50%;
        top:30px;
        left:130px;
        width:160px;
        height:40px;
        perspective:270px;
        -webkit-perspective:270px;
        z-index:2
    }
    #body #armL,#body #armR {
        background:#002;
        top:25px;
        left:125px;
        width:45px;
        height:10px;
        transform-origin:0 0
    }
    #body #armL .hand,#body #armR .hand {
        background:#002;
        border-radius:50%;
        top:-2px;
        left:33px;
        width:18px;
        height:18px
    }
    #body #armL {
        transform:rotate(15deg);
        animation:rotArmL 1s infinite
    }
    #body #armR {
        transf.........完整代码请登录后点击上方下载按钮下载查看