css布局实现竹林中的大熊猫招手动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现竹林中的大熊猫招手动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	display: flex;
	margin-left: 30%;
	min-height: 100vh;
	background: linear-gradient(green, lightgreen);
}
.bamboo-1,
.bamboo-2,
.bamboo-3,
.bamboo-4,
.bamboo-5,
.bamboo-6,
.bamboo-7 {
	width: 35px;
	min-height: 70vh;
	background-image: linear-gradient(90deg, #418c47, #54ab5b);
	box-shadow: 0 0 20px inset #3f423f;
	filter: blur(0.8px);
	position: relative;
}

.bamboo-1 {
	transform: skewX(-2deg);
}

.bamboo-2 {
	z-index: 1;
	transform: scaleY(-1);
}

.bamboo-3 {
	z-index: 2;
	margin-left: 20px;
}

.bamboo-4 {
	margin-left: 36%;
	transform: skewX(5deg);
}

.bamboo-5 {
	z-index: 1;
	transform: scaleY(-1);
}

.bamboo-6 {
	z-index: 2;
	margin-left: 20px;
}

.bamboo-7 {
	transform: scaleY(-1) skewX(-2deg);
}

.line-1,
.line-2,
.line-3,
.line-4,
.line-5 {
	position: absolute;
	width: 100%;
	height: 3px;
	background: #ebebe4;
	filter: blur(0.5px);
	box-shadow: 0 0 2px 0 #3f423f;
	border-bottom: 1px solid black;
}

.line-1 {
	top: 10%;
}

.line-2 {
	top: 33%;
}

.line-3 {
	top: 58%;
}

.line-4 {
	top: 79%;
}

.line-5 {
	top: 96%;
}

.panda {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translatex(-50%);
}
.head {
	height: 140px;
	width: 150px;
	border-radius: 70% 70% 55% 55% /80% 80% 59% 59%;
	position: absolute;
	background: white;
	margin-top: 0;
}
#eyes {
	position: absolute;
	top: 24%;
	width: 60px;
	height: 60px;
	border-radius: 75% 50% 70% 50% / 72% 50% 75% 50%;
	background: black;
	z-index: 2;
}
.left-eye {
	left: 7%;
	transform: rotate(-10deg);
}
.left-eye:before {
	position: absolute;
	content: "";
	width: 18px;
	height: 25px;
	background: #fff;
	border-radius: 50%;
	left: 55%;
	top: 20%;
	animation: eyes-blink 2s infinite;
}
.right-eye {
	right: 7%;
	transform: scaleX(-1) rotate(-10deg);
}
.right-eye:before {
	position: absolute;
	content: "";
	width: 18px;
	height: 25px;
	background: #fff;
	border-radius: 50%;
	left: 55%;
	top: 20%;
	animation: eyes-blink 2s infinite;
}
#ears {
	position: absolute;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: #373a3c;
	z-index: -1;
	box-shadow: 0 0 0 10px #000;
	top: 3px;
}
.left-ear {
	left: -5px;
}
.right-ear {
	right: -5px;
}
#nose {
	width: 24px;
	height: 12px;
	background: black;
	position: absolute;
	top: 60%;
	left: 42%;
}
#lips {
	width: 20px;
	height: 20px;
	border: 4px solid;
	border-radius: 0 0 0 20px;
	border-right: none;
	border-top: none;
	position: absolute;
	top: 64%;
	z-index: 1;
	background: #fff;
}
.left-lip {
	left: 35%;
	transform: scaleX(-1) rotate(-30deg);
}
.right-lip {
	right: 35%;
	transform: rotate(-30deg);
}
#mouth {
	height: 30px;
	width: 30px;
	background: #000;
	position: absolute;
	top: 62%;
	left: 50%;
	transform: translatex(-50%);
	border-radius: 50%;
	overflow: hidden;
	animation: chewing 2s infinite;
}
#tongue {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #ed7770;
	position: absolute;
	top: 70%;
	left: 18%;
}
.body {
	height: 180px;
	width: 170px;
	background: linear-gradient(#000 45%, 0, #fff);
	border-radius: 100% 100% 82% 80% / 100% 100% 100% 100%;
	position: relative;
	margin-top: 58%;
}
.left-hand {
	position: absolute;
	width: 50px;
	height: 125px;
	background: #000;
	border-radius: 100% 0% 80% 80% / 100% 17% 76% 80%;
	top: 0px;
	left: -20px;
	transform: rotate(40deg);
}
.right-hand {
	position: absolute;
	width: 50px;
	height: 165px;
	background: #000;
	border-radius: 100% 0% 80% 80% / 100% 17% 76% 80%;
	right: -18px;
	top: -40px;
	transform: scale(-1, -1) rotate(30deg);
	animation: waving 1s infinite;
	transform-origi.........完整代码请登录后点击上方下载按钮下载查看