单个div+css实现花朵浇水生长长大动画效果代码-html代码-BFW代码库

单个div+css实现花朵浇水生长长大动画效果代码

代码语言：html

所属分类：动画

代码描述：单个div+css实现花朵浇水生长长大动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          margin:0;
          height:100vh;
          display:grid;
          place-items:center;
          background:lightblue;
          overflow:hidden;
        }
        .growing {
          width:150px;
          height:150px;
          position:relative;
          clip-path:inset(-100vh 0);
        }
        .growing:before {
          content:"";
          display:block;
          width:400%;
          height:100%;
          background:
            /*1*/
            radial-gradient(farthest-side,#639510 97%,#0000) 12.5% 65%/12px 9px,
            linear-gradient(#996b52 0 0) 9% 80%/9.4% 9%,
            linear-gradient(#996b52 0 0) 10% 100%/7% 25%,
            linear-gradient(#639510 0 0) 12.5% 100%/5px 36%,   
            /*2*/    
            radial-gradient(farthest-side,#639510 97%,#0000) 35.5% 50%/15px 10px,
            radial-gradient(farthest-side,#639510 97%,#0000) 38% 64%/15px 10px ,
            linear-gradient(#996b52 0 0) 35.5% 80%/9.4% 9%,
            linear-gradient(#996b52 0 0) 36% 100%/7% 25%,
            linear-gradient(#639510 0 0) 37% 100%/5px 52%,    
            /*3*/
            radial-gradient(farthest-side,#fb3e4c 98%,#0000) 64.5% 40.5%/10px 9px,
            radial-gradient(farthest-side at bottom,#0000 calc(100% - 5px),#639510 0 100%,#0000)63.6% 34%/20px 10px,
            radial-gradient(farthest-side,#639510 97%,#0000) 61% 50%/15px 10px,
            radial-gradient(farthest-side,#639510 97%,#0000) 63.5% 64%/15px 10px ,
            linear-gradient(#996b52 0 0) 63.5% 80%/9.4% 9%,
            linear-gradient(#996b52 0 0) 63.1% 100%/7% 25%,
            linear-gradient(#639510 0 0) 62% 100%/5px 62%,
            /*4*/
            radial-gradient(farthest-side at 50%.........完整代码请登录后点击上方下载按钮下载查看