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