css蝙蝠合成动画效果-html代码-BFW代码库

css蝙蝠合成动画效果

代码语言：html

代码描述：主要利用了div进行蝙蝠图形的布局，然后设置动画animation就实现了

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
	.div{
		height: 500px;
		width: 500px;
		background-color: transparent;

	}
	.aa{top: 45%;
		height: 100px;
		width: 100px;
		background-color:white;
		margin-left:0;
		position:absolute;
		animation: a 3s 1;

	}
	@keyframes a{
		10%{
			box-shadow: 0px 0px 10px white,
					0px 0px 20px white,
					0px 0px 30px white;
					
		}
		20%{
			top: 45%;
			margin-left: -400px;
			transform: rotateZ(180deg);
		}
		50%{
		top: 45%;
		background-color:black;
		margin-left: 0;
		position:absolute;
		}
	}

	.bb{top: 45%;
		height: 100px;
		width: 100px;
		background-color:black;
		margin-left: 0;
		position: absolute;
		border-top-right-radius: 110px;
		animation: a 3s 1;
	}

	.cc{top: 45%;
		background-color:white;
		position: absolute;
		margin-left: 100px;
		height: 100px;
		width: 70px;
		animation: c 3s 1;

}
	@keyframes c{
		10%{
			box-shadow: 0px 0px 10px white,
					0px 0px 20px white,
					0px 0px 30px white;
					
		}
		20%{
			top: 45%;
			margin-top: 200px;
			margin-left: 20	0px;
			transform: rotateZ(180deg);
		}
		50%{
		margin-left: 300px;
		background-color:white;
		position:absolute;
		}
	}

	.dd{
		top: 45%;
		background-color:white;
		position: absolute;
		margin-left: 170px;
		height: 100px;
		width: 50px;
		animation: d 3s 1;
	}
	@keyframes d{
		10%{
			box-shadow: 0px 0px 10px white,
					0px 0px 20px white,
					0px 0px 30px white;
					
		}
		20%{
			top: 45%;
			margin-top: -300px;
			margin-left: -350px;
			transform: rotateZ(180deg);
		}
		50%{
		
		background-color:black;
		margin-left: 170px;
		position:absolute;
		}
	}
	.ee{
		background-color:black;
		position: absolute;
		margin-left: 170px;
		top: 45%;
		width: 50px;
		height: 30px;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		animation: d 3s 1;

	}
	.ff{
		top: 45%;
		background-color:white;
		position: absolute;
		height: 150px;
		width: 60px;
		margin-left: 220px;
		margin-top: -50px;
		animation:f 3s 1;
	}
	@keyframes f{
		10%{
			box-shadow: 0px 0px 10px white,
					0px 0px 20px white,
					0px 0px 30px white;
					
		}
		20%{
			top: 45%;
			margin-top: -300px;
			margin-left: 420px;
			transform: rotateZ(-180deg);
		}
		50%{
		margin-left: 220px;		
		background-color:black;
		position:absolute;
		}
	}
	.gg{
		top: 45%;
		background-color:white;
		position: absolute;
		margin-left: 280px;
		height: 100px;
		width: 50px;
		animation: g 3s 1;}

		@keyframes g{
			10%{
			box-shadow: 0px 0px 10px white,
					0px 0px 20px white,
					0px 0px 30px white;
					
		}
		20%{
			top: 45%;
			margin-left: 500px;
			margin-top:200px;
			transform: rotateZ(-180deg);
		}
		50%{
		margin-left: 280px;
		background-color:black;
		position:absolute;
		}
		}

	.hh{
		background-color:black;
		position: absolute;
		margin-left:280px;
		top: 45%;
		width: 50px;
		height: 30px;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		animation: g 3s 1;}


	.ii{top: 45%;
		background-color:white;
		position: absolute;
		margin-left: 330px;
		height: 100px;
		width: 70px;
		animation: i 3s 1;

}
	@keyframes i{
		10%{
			box-shadow: 0px 0px 10.........完整代码请登录后点击上方下载按钮下载查看