css实现山坡上小鹿摇头晃脑摇尾巴动画效果代码-html代码-BFW代码库

css实现山坡上小鹿摇头晃脑摇尾巴动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现山坡上小鹿摇头晃脑摇尾巴动画效果代码

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

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

<head>
    <meta charset="UTF-8">
  
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .reindeer {
	transform:scale(1) rotateZ(-2deg);
	position:absolute;
	top:60px;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	border-top:solid 25px transparent;
	border-right:solid 150px #dab48c;
	width:0;
	height:60px
}
.reindeer:before {
	content:"";
	position:absolute;
	top:-25px;
	left:150px;
	border-left:solid 50px #e6cdb2;
	border-bottom:solid 40px transparent;
	width:0;
	height:45px
}
.reindeer:after {
	content:"";
	position:absolute;
	top:-50px;
	left:150px;
	border-left:solid 20px transparent;
	border-bottom:solid 25px #e6cdb2;
	width:30px;
	height:0;
	z-index:-1
}
.head {
	content:"";
	position:absolute;
	top:-80px;
	left:160px;
	background-color:#dab48c;
	border-radius:0 0 15px 15px;
	width:40px;
	height:55px;
	animation:10s tilt ease-in-out infinite
}
.head:before {
	content:"";
	position:absolute;
	top:-10px;
	left:-20px;
	border-left:solid 20px transparent;
	border-top:solid 20px #dab48c;
	width:0;
	height:0;
	z-index:1
}
.head:after {
	content:"";
	position:absolute;
	top:-10px;
	left:40px;
	border-right:solid 20px transparent;
	border-top:solid 20px #dab48c;
	width:0;
	height:0;
	z-index:1
}
.eyes-and-nose .........完整代码请登录后点击上方下载按钮下载查看