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 {
	width:4px;
	height:4px;
	border-radius:50%;
	margin:30px auto;
	background-color:#F00;
	box-shadow:0 0 4px 4px #F00;
	animation:5s glow infinite ease-in-out
}
.eyes-and-nose:before {
	content:"";
	position:absolute;
	top:18px;
	right:4px;
	border-right:solid 6px transparent;
	border-top:solid 6px #774916;
	width:0;
	height:0;
	animation:5s blink infinite linear
}
.eyes-and-nose:after {
	content:"";
	position:absolute;
	top:18px;
	left:4px;
	border-left:solid 6px transparent;
	border-top:solid 6px #774916;
	width:0;
	height:0;
	animation:5s blink infinite linear
}
.antlers {
	position:absolute;
	top:0;
	right:0;
	bottom:65px;
	left:0;
	margin:auto
}
.antlers:before {
	content:"";
	top:0;
	position:absolute;
	width:40px;
	height:12px;
	background-color:#dab48c;
	z-index:1
}
.outside-antler-trunk {
	position:absolute;
	top:-50px;
	width:8px;
	height:60px;
	background-color:#563107;
	transform-origin:4px 52px
}
.outside-antler-trunk.left {
	position:absolute;
	left:0;
	transform:rotateZ(-45deg)
}
.outside-antler-trunk.right {
	position:absolute;
	right:0;
	transform:rotateZ(45deg) rotateY(180deg)
}
.outside-antler-trunk:before {
	content:"";
	position:absolute;
	top:-45px;
	left:10px;
	width:8px;
	height:50px;
	background-color:#563107;
	transform:rotateZ(25deg)
}
.outside-antler-trunk:after {
	content:"";
	position:absolute;
	top:-63px;
	left:32p.........完整代码请登录后点击上方下载按钮下载查看