欢迎您光临优码网!

纯CSS3实现幽灵漂浮动画

一款基于纯CSS3的动画特效,用CSS3绘制了一个“可爱”的幽灵,然后通过CSS3的动画属性对幽灵进行上下的漂浮,动画效果还是非常不错的。

HTML代码

	<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>

CSS3代码

	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;}
	}


1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。