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

代码语言:html

所属分类:动画

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

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

网友评论0