css布局实现熊猫小宝宝爬树开屏动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现熊猫小宝宝爬树开屏动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>

@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap');
:root {
	--white: #fff;
	--black: #000;
}
* {
	padding: 0;
	margin: 0;
}
body {
	background-color: #9ae031;

  transition:transform .5s;
  transition-delay:.5s;
}
.hidden{
  position:absolute;
  width:300px;
  height:169px;
  top:250px;
  right:calc( 50% - 180px );
  background-color: black;
  border: solid black 5px;
  border-bottom-width:10px;
  border-radius:5px;
  opacity:.15;
  transition:opacity .5s;
  transition-delay:opacity .5s;
}
.hiddenScreen{
  position:absolute;
  width:100%;
  height:100%;
  background-color: white;
  opacity:0;
  transition: opacity .5s;
  transition-delay:opacity .1s;
}
.hidden:before, .hidden:after{
  position:absolute;
  z-index:-1;
  content:"";
  background-color:black;
}
.hidden:before{
  right:calc( 50% - 40px );
  width:80px;
  height:15px;
  border-radius:50%;
  bottom:-30px;
}
.hidden:after{
  right:calc( 50% - 20px );
  width:40px;
  height:20px;
  bottom:-20px;
}
.video{
  width:100%;
  height:100%;
  position:absolute;
  opacity:0;
  transition:opacity .5s;
  transition-delay:.5s;
}
.scene{
  width:500px;
  height:500px;
  left:calc( 50% - 250px );
  position:absolute;
  transform-origin:bottom left;
  transform:rotate(0deg);
  transition:transform .5s;
  transition-delay:.25s;
}
.backLegs{
  position:absolute;
  left:calc(50% - 120px);
  top:242px;
  width: 140px;
  height: 70px;
  transform:rotate(-20deg);
}
.backLeftLeg,.backRightLeg{
  position:absolute;
  top:10px;
  width: 40px;
  box-sizing:border-box;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  background-color: black;

  transform:rotate(-5deg);
  transform-origin:top center;
  animation-delay:.125s;
  transition:transform .5s;
}
.backLeftLeg{
 left:10px;
 height: 87px;
}
.backRightLeg{
  right:10px;
  height:78px;
}
.tree{
  position:absolute;
  width:500px;
  height:500px;
  left:calc( 50% - 250px );
  background-color: #f5bd5d;

  clip-path: polygon(82% 100%, 75% 96%, 69% 89%, 50% 24%, 41% 21%, 30% 22%, 39% 19%, 49% 20%, 44% 9%, 40% 2%, 44% 2%, 48% 7%, 52% 18%, 54% 20%, 63% 55%, 66% 57%, 66% 59%, 64.5% 60%, 72% 85%, 78% 91%, 86% 95%);
   transform:rotate(80deg);
}
.sign{
  position:absolute;
  width:160px;
  height:60px;
  top:220px;
  right:calc( 50% - 250px );
  transform-origin:top center;
  transform:rotate(0deg);
  transition:transform .5s;
  transition-delay:.25s;
}
.signBoard{
  position:absolute;
  z-index:2;
  background-color: #b87b00;
  
  width:90px;
  height:190px;
  left:calc(50% - 45px);
  top:-10px;
  border:solid #a86e02 5px;
  border-radius:10px;
  transform-origin:center;
  transform:rotate(90deg);
}
.signText{
  position:absolute;
  z-index:3;
  left:calc(50% - 95px);
  top:50px;
  font-family: 'Freckle Face', cursive;
  font-size:30px;
  text-shadow:none!important;
  text-align:center;
  width:160px;
  height:80px;
}
.signRope{
  position:absolute;
  z-index:1;
  top:-65px;
  left:10%;
  width:80%;
  height:110px;
  background-color:brown;
  background-image: linear-gradient(90deg, #b87b00 25%, #a86e02 25%, #a86e02 50%, #b87b00 50%, #b87b00 75%, #a86e02 75%, #a86e02 100%);
  background-size:10.00px 10.00px;
  clip-path: polygon(0% 99%, 49% 50%, 100% 100%, 92% 100%, 49% 56%, 8% 99%);
}
.nail{
  position:absolute;
  z-index:5;
  top:-10px;
  left:calc(50% - 8px);
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:grey;
}
.arrow{
  position:absolute;
  z-index:6;
  width:40px;
  height:40px;
  right:-62px;
  top:68px;
  color:inherit;
  font-size:100px;
  font-weight:bold;
  cursor:pointer;
  transform: rotate(90deg);
}
.sign:hover > div{
  cursor:pointer;
  text-shadow:0px 0px 2px white, 0px 0px 5px white;
}
.panda{
  position:fixed;
  left:calc(50% - 120px);
  top:242px;
  width: 140px;
  height: 70px;
  transform:rotate(-20deg);
}
.body{
  position:absolute;
  background: white;
  width: 140px;
  height: 70px;
  top:-5px;
  border:solid white 5px;
  border-radius: 40%;
  background-color: #f5f5f5;
 
}
.leftLeg,.rightLeg{
  position:absolute;
  top:30px;
  height: 60px;
  width: 40px;
  box-sizing:border-box;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  background-color: black;

  transform:rotate(-5deg);
  transform-origin:top center;
}
.leftLeg{
  left:5px;
}
.rightLeg{
  height: 50px;
  right:15px;
}
.head{
  position:absolute;
  width:90px;
  height:70px;
  top:0px;
  left:85px;
  transform:rotate(15deg);
}
.ears{
  position:absolute;
  width: 100%;
  height: 100%;
  top:5px;
}
.leftEar, .rightEar{
  position:absolute;
  top:-7px;
  width: 25px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}
.leftEar{
  left: 0px;
  transform:rotate(-40deg);
}
.rightEar{
  right: 0px;
  transform:rotate(40deg);
}
.face{
  position:absolute;
  width: 100%;
  height: 100%;
  z-index:1;
  box-sizing:border-box;
  border:solid white 5px;
  border-radius: 50%;
  background-color: #f5f5f5;
  
}
.leftEye,.rightEye{
  position:absolute;
  top:22px;
  width: 15px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}
.leftEye{
.........完整代码请登录后点击上方下载按钮下载查看