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