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 {
    	transform:rotate(45deg);
    	animation:rotArmR 1s infinite
    }
    #body #wingL,#body #wingR {
    	background:#002;
    	border-radius:0 50% 50% 0;
    	top:15px;
    	left:40px;
    	width:90px;
    	height:180px;
    	transform-origin:0 0
    }
    #body #wingL {
    	transform:rotateX(60deg);
    	animation:flapL 1s ease-out infinite
    }
    #body #wingR {
    	transform:rotateX(-60deg);
    	animation:flapR 1s ease-out infinite
    }
    #body #legL,#body #legR {
    	background:#002;
    	top:18px;
    	left:-40px;
    	width:80px;
    	height:18px;
    	transform-origin:100% 100%
    }
    #body #legL .foot,#body #legR .foot {
    	background:#002;
    	border-radius:0 0 50% 25%;
    	width:20px;
    	height:45px
    }
    #body #legL {
    	transform:rotate(-5deg);
    	animation:rotLegL 1s infinite
    }
    #body #legR {
    	transform:rotate(-25deg);
    	animation:rotLegR 1s infinite
    }
    #tail {
    	top:42px;
    	left:0;
    	height:10px
    }
    #tail #inner {
    	background:#002;
    	width:70px;
    	height:17px;
    	left:70px;
    	transform-origin:100% 100%;
    	transform:rotate(3deg);
    	animation:bendTail 1s infinite
    }
    #tail #inner #outer {
    	background:#002;
    	top:1px;
    	left:-6.........完整代码请登录后点击上方下载按钮下载查看