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

代码语言：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:32px;
	width:8px;
	height:30px;
	background-color:#563107;
	border-radius:4px 4px 0 0;
	transform:rotateZ(60deg)
}
.antler-branches {
	position:absolute;
	top:-40px;
	width:8px;
	height:30px;
	background-color:#563107;
	z-index:-1;
	border-radius:4px 4px 0 0;
	transform-origin:4px 35px
}
.antler-branches.left {
	transform:rotateZ(55deg)
}
.antler-branches.right {
	transform:rotateZ(55deg) rotateY(180deg)
}
.inside-antler {
	position:absolute;
	top:-12px;
	width:8px;
	height:20px;
	background-color:#563107;
	z-index:1;
	transform-origin:4px 0;
	border-radius:0 0 4px 4px
}
.inside-antler:before {
	content:"";
	position:absolute;
	top:-18px;
	left:5px;
	width:8px;
	height:20px;
	background-color:#563107;
	z-index:1;
	transform-origin:4px 0;
	border-radius:4px 4px 0 0;
	transform:rotateZ(15deg)
}
.inside-antler.left {
	position:absolute;
	left:3px;
	transform:rotateZ(-30deg)
}
.inside-antler.right {
	position:absolute;
	right:3px;
	transform:rotateZ(30deg) rotateY(180deg)
}
.tail {
	content:"";
	position:absolute;
	top:-19px;
	left:-15px;
	border-top:15px solid transparent;
	border-left:20px solid #c1823f;
	width:0;
	height:0;
	transform-origin:20px 20px;
	transform:rotateZ(-75deg);
	animation:15s flap ease-in-out infinite
}
.legs {
	position:absolute;
	top:59px
}
.legs div {
	position:absolute
}
.leg-rear-right {
	width:10px;
	border-top:30px solid #dab48c;
	border-right:45px solid.........完整代码请登录后点击上方下载按钮下载查看