css实现兔子跳动动画效果代码-html代码-BFW代码库

css实现兔子跳动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现兔子跳动动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);
	* {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
html {
	width:100%;
	height:100%
}
body {
	width:100%;
	height:100%;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	-moz-box-align:center;
	-ms-box-align:center;
	-webkit-box-align:center;
	box-align:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-webkit-box-pack:center;
	box-pack:center;
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0)
}
.clearfix {
	zoom:1
}
.clearfix:before,.clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	overflow:hidden
}
.clearfix:after {
	clear:both
}
body {
	background:#e2b29f;
	font-size:120%
}
.rabbit {
	width:5em;
	height:3em;
	background:#fff;
	border-radius:70% 90% 60% 50%;
	position:relative;
	box-shadow:-0.2em 1em 0 -0.75em #b78e81;
	-moz-transform:rotate(0deg) translate(-2em,0);
	-ms-transform:rotate(0deg) translate(-2em,0);
	-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;
	-moz-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	-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;
	-moz-transform:translate(0,0);
	-ms-transform:translate(0,0).........完整代码请登录后点击上方下载按钮下载查看