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

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

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