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

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

代码语言：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%;
}
.........完整代码请登录后点击上方下载按钮下载查看