纯CSS3幽灵上下浮动动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3幽灵上下浮动动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
 <head>
  <meta charset="gb2312">
  <title>纯CSS3幽灵上下浮动动画特效</title>
  <style>
  *{padding:0;margin:0;}
	body{
		position:relative;
   	    background:#90C0F1;
	    overflow:hidden;
	}
	.ghost{
		width:160px;
		margin:100px auto;
		position:relative;
		animation:ghostUpdown 1s infinite alternate;
		-webkit-animation:ghostUpdown 1s infinite alternate;
	}
	.ghostBody{
		width:140px;
		height:180px;
		background:#fff;
		border-radius:100% 100% 0 0;
		position:relative;
	}
	.ghostEye{
		width:15px;
		height:20px;
		border-radius:100%;
		border:2px solid #061E74;
		background:#061E74;
		box-shadow:inset -2px -2px #fff;
		position:absolute;
		top:60px;
	}
	.left{left:45px}
	.right{right:50px;}
	.ghostMouth{
		width:15px;
		height:20px;
		border-radius:100%;
		border:2px solid #061E74;
		position:absolute;
		top:90px;
		left:70px;
	}
	.ghostWave{
		position:absolute;
		width: 140px;
		height: 20px;
		background-size:25px 20px;
		background-image:radial-gradient(circle at 50% 0%,#fff,71%,transparent 71%);
	}
	.shadow{
		width:140px;
		height:10px;
		border-radius:100%;
		background:#061E74;
		opacity:0.3;
		margin-top:70px;
		animation:shadow 1s infinite alternate;
		-webkit-animation:shadow 1s infinite alternate;
	}
	@keyframes ghostUpdown{
		from{margin-top:100px;}
		to{margin-top:70px;}
	}
	@-webkit-keyframes ghostUpdown{
		from{margin-top:100px;}
		to{margin-top:70px;}
	}
	@keyframes shadow{
		from{margin-top:70px;opacity:0.3;}
		to{margin-top:100px;opacity:0.1;}
	}
	@-webkit-keyframes shadow{
		from{margin-top:70px;opacity:0.3;}
		to{margin-top:100px;opacity:0.1;}
	}
  </style>
 </head>
 <body>
	<div class="ghost">
		<div class="ghostBody"></div>
		<div class="ghostEye left"></div>
		<div class="ghostEye right"></div>
		<div class="ghostMouth"></div>
		<div class="ghostWave"></div>
		<div class="shadow"></div>
	</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)