今天给大家分享一下，使用纯css实现一只可爱的兔子，它拥有移动，跳跃等的动画效果，代码中使用了基本布局和css3动画 ，效果预览如下：

代码实现

首先定义 dom，页面中包含 2 个元素，分别代表兔子和云朵：

<div class="rabbit"></div>
<div class="clouds"></div>

css样式部分：

<style>
.tz_box {
	width:100%;
	height:300px;
	background:#e2b29f;
	font-size:120%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rabbit {
	width:5em;
	height:3em;
	background:#fff;
	border-radius:70% 90% 60% 50%;
	position:relative;
	box-shadow:-0.2em 1em 0 -0.75em #b78e81;
	-webkit-transform:rotate(0deg) translate(-2em,0);
	transform:rotate(0deg) translate(-2em,0);
	animation:hop 1s infinite linear;
	z-index:1
}
.no-flexbox .rabbit {
	margin:10em auto 0
}
.rabbit:before {
	content:"";
	position:absolute;
	width:1em;
	height:1em;
	background:white;
	border-radius:100%;
	top:.5em;
	left:-0.3em;
	box-shadow:4em .4em 0 -0.35em #3f3334,0.5em 1em 0 white,4em 1em 0 -0.3em white,4em 1em 0 -0.3em white,4em 1em 0 -0.4em white;
	animation:kick 1s infinite linear
}
.rabbit:after {
	content:"";
	position:absolute;
	width:.75em;
	height:2em;
	background:white;
	border-radius:50% 100% 0 0;
	-webkit-transform:rotate(-30deg);
	transform:rotate(-30deg);
	right:1em;
	top:-1em;
	border-top:1px solid #f7f5f4;
	border-left:1px solid #f7f5f4;
	box-shadow:-0.5em 0 0 -0.1em white
}
.clouds {
	background:white;
	width:2em;
	height:2em;
	border-radius:100% 100% 0 0;
	position:relative;
	top:-5em;
	filter:alpha(opacity=0);
	opacity:0;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
	animation:cloudy 1s infinite linear forwards;
	box-shadow:5em 2em 0 -0.3em white,-2em 2em 0 0 white
}
.clouds:before,.clouds:after {
	content:'';
	position:absolute;
	box-shadow:5em 2em 0 -0.3em white,-2em 2em 0 white
}
.clouds:before {
	width:1.25em;
	height:1.25em;
	border-radius:100% 100% 0 100%;
	background:white;
	left:-30%;
	bottom:0
}
.clouds:after {
	width:1.5em;
	height:1.5em;
	border-radius:100% 100% 100% 0;
	background:white;
	right:-30%;
	bottom:0
}
@keyframes hop {
	20% {
		-webkit-transform:rotate(-10deg) translate(1em,-2em);
		transform:rotate(-10deg) translate(1em,-2em);
		box-shadow:-0.2em 3em 0 -1em #b78e81
	}
	40% {
		-webkit-transform:rotate(10deg) translate(3em,-4em);
		transform:rotate(10deg) translate(3em,-4em);
		box-shadow:-0.2em 3.25em 0 -1.1em #b78e81
	}
	60%,75% {
		-webkit-transform:rotate(0) translate(4em,0);
		transform:rotate(0) translate(4em,0);
		box-shadow:-0.2em 1em 0 -0.75em #b78e81
	}
}
@keyframes kick {
	20%,50% {
		box-shadow:4em .4em 0 -0.35em #3f3334,0.5em 1.5em 0 white,4em 1.75em 0 -0.3em white,4em 1.75em 0 -0.3em white,4em 1.9em 0 -0.4em white
	}
	40% {
		box-shadow:4em .4em 0 -0.35em #3f3334,0.5em 2em 0 white,4em 1.75em 0 -0.3em white,4.2em 1.75em 0 -0.2em white,4.4em 1.9em 0 -0.2em white
	}
}
@keyframes cloudy {
	40% {
		filter:alpha(opacity=75);
		opacity:.75;
		-webkit-transform:translate(-3em,0);
		transform:translate(-3em,0)
	}
	55% {
		filter:alpha(opacity=0);
		opacity:0;
		-webkit-transform:translate(-4em,0);
		transform:translate(-4em,0)
	}
	90% {
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
}	
</style>

通过display: flex实现居中布局，border-radius来画出兔子的身体，然后用径向渐变画出兔子的眼睛，用伪元素画出兔子的右耳、尾巴和阴影，用阴影画出兔子的左耳、腿、云朵，
最后利用css3动画增加兔子跳动和云朵飘动的动画。

最后“fly63前端网”祝大家兔年大吉大利，财源滚滚！！

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12289