单个div+css实现树苗生长动画效果代码-html代码-BFW代码库

单个div+css实现树苗生长动画效果代码

代码语言：html

所属分类：动画

代码描述：单个div+css实现树苗生长动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          margin: 0;
          padding: 0;
          border: 0;
        }
        
        @property --tall {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 100%;
        }
        
        @property --branch1 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        
        @property --branch2 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        
        @property --branch3 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        
        @property --branch4 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        
        @property --leaves1 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --leaves2 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --leaves3 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --leaves4 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --leaves5 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --leaves6 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --leaves7 {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        
        @property --leaves1y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }
        @property --leaves2y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }
        @property --leaves3y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }
        @property --leaves4y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }
        @property --leaves5y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }
        @property --leaves6y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }
        @property --leaves7y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }
        @property --leaves1x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        @property --leaves2x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        @property --leaves3x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        @property --leaves4x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        @property --leaves5x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        @property --leaves6x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        @property --leaves7x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        
        
        @keyframes growBranch1 {
          0%, 60% { --branch1: 0%; }
          100% { --branch1: 22%; }
        }
        
        @keyframes growBranch2 {
          0%, 80% { --branch2: 0%; }
          100% { --branch2: 16.6%; }
        }
        
        @keyframes growBranch3 {
          0%, 80% { --branch3: 0%; }
          100% { --branch3: 6%; }
        }
        
        @keyframes growBranch4 {
          0%, 94% { --branch4: 0%; }
          100% { --branch4: 5%; }
        }
        
        @keyframes growTree {
          0%, 50% { --tall: 100%; }
          100% { --tall: -5%; }
        }
        
        @keyframes leaves1grow {
          0%, 80% {
            --leaves1: 0%;
            --leaves1x: 50%;
            --leaves1y: 50%;
          }
          100% { 
            --leaves1: 15%;
            --leaves1x: 60%;
            --leaves1y: 28%;
          }
        }
        
        @keyframes leaves2grow {
          0%, 60% {
            --leaves2: 0%;
            --leaves2x: 50%;
            --leaves2y: 70%;
          }
          100% { 
            --leaves2: 13%; 
            --leaves2x: 38%;
            --leaves2y: 50%;
          }
        }
        
        @keyframes leaves3grow {
          0%, 70% {
            --leaves3: 0%;
            --leaves3x: 50%;
            --leaves3y: 60%;
          }
          100% { 
            --leaves3: 22%;
            --leaves3y: 40%;
            --leaves3y: 28%;
          }
        }
        
        @keyframes leaves4grow {
          0%, 66% {
            --leaves4: 0%;
            --leaves4x: 50%;
            --leaves4y: 65%;
          }
          100% { 
            --leaves4: 18%;
            --leaves4x: 65%;
            --leaves4y: 55%;
          }
        }
        
        @keyframes leaves5grow {
          0%, 50% {
            --leaves5:.........完整代码请登录后点击上方下载按钮下载查看