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

网友评论0