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{
  left:20px;
  transform:rotate(20deg);
}
.rightEye{
  right:20px;
  transform:rotate(-20deg);
  border-top-right:solid white 20px;
}
.leftEyeBall,.rightEyeBall{
  position:absolute;
  top:25px;
  color:white;
  background-color:#4f4f4f;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation-name:blink;
  animation-duration:5s;
  animation-iteration-count:infinite;
}
.rightEyeBall{left:25px;}
.leftEyeBall{right:25px;}
.leftEyeBall:after,.rightEyeBall:after{
  content:'';
  position:absolute;
  background-color:white;
  opacity:.6;
  width: 4px;
  height: 4px;
  top:1px;
  left:1px;
  border-radius: 50%;
}
.muzzle{
  position:absolute;
  top:35px;
  left:calc( 50% - 15px);
  width: 30px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
}
.nose{
  position: absolute;
  top:5px;
  left:calc( 50% - 7px);
  width: 0;
  height: 0;
  border-style: solid;
  border-radius:100%;
  border-width: 7px 7px 0 7px;
  border-color: black transparent transparent transparent;
}
.mouth{
  position: absolute;
  top:-3px;
  left:calc( 50% - 10px);
  width: 20px;
  height: 20px;
  background-color:black;
  clip-path: polygon(49% 100%, 64% 99%, 79% 96%, 90% 91%, 98% 82%, 88% 88%, 78% 92%, 64% 94%, 51% 95%, 51% 68%, 48% 67%, 48% 95%, 33% 94%, 21% 92%, 12% 89%, 1% 84%, 10% 93%, 21% 97%, 34% 99%);
}
.grass{
  position:absolute;
  width:90px;
  height:60px;
  left:calc(50% - 270px);
  top:410px;
  background: rgb(11,36,0);
  background: linear-gradient(90deg, rgba(105,153,36,1) 0%, rgba(129,205,15,1) 35%, rgba(71,112,8,1) 100%);
  clip-path: polygon(32% 100%, 26% 90%, 19% 82%, 9% 77%, 3% 72%, 0 66%, 7% 70%, 16% 73%, 24% 78%, 31% 86%, 36% 93%, 36% 89%, 34% 81%, 32% 73%, 26% 65%, 21% 57%, 17% 51%, 14% 46%, 10% 40%, 5% 30%, 18% 42%, 25% 51%, 32% 61%, 37% 70%, 41% 78%, 44% 84%, 42% 75%, 40% 65%, 39% 54%, 39% 46%, 39% 36%, 40% 29%, 44% 15%, 46% 21%, 46% 28%, 46% 36%, 46% 44%, 47% 54%, 48% 65%, 50% 73%, 50% 79%, 51% 76%, 54% 70%, 55% 61%, 57% 51%, 58% 40%, 60% 30%, 62% 21%, 64% 12%, 68% 4%, 68% 13%, 67% 26%, 66% 36%, 64% 47%, 63% 58%, 62% 66%, 61% 76%, 60% 80%, 63% 71%, 65% 63%, 70% 48%, 75% 39%, 79% 34%, 84% 28%, 90% 23%, 100% 19%, 95% 24%, 90% 29%, 85% 34%, 82% 40%, 79% 44%, 75% 55%, 73% 63%, 70% 78%, 69% 82%, 69% 88%, 75% 85%, 78% 77%, 82% 70%, 87% 62%, 94% 57%, 100% 56%, 94% 62%, 91% 67%, 87% 75%, 85% 82%, 81% 94%, 83% 100%);
}

@keyframes blink{
  0%{transform:scaleY(1)}
  45%{transform:scaleY(1)}
  50%{transform:scaleY(.1)}
  55%{transform:scaleY(1)}
  100%{transform:scaleY(1)}
}
@keyframes climb{
  0%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
  100%{transform:rotate(-5deg)}
}
.climbing{
  animation-name:climb;
  animation-duration:.25s;
  animation-iteration-count:infinite;
}
.climbingSlow{
  animation-name:climb.........完整代码请登录后点击上方下载按钮下载查看