css+svg实现树叶背景效果代码-html代码-BFW代码库

css+svg实现树叶背景效果代码

代码语言：html

所属分类：背景

代码描述：css+svg实现树叶背景效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
    <style>
        svg {
      width: 100vw;
      height: 100vh;
      vertical-align: bottom;
    }
    
    .bg {
      fill: #244242;
    }
    
    .c1-10 {
      fill: #260d0d;
    }
    
    .c1-20 {
      fill: #4d1a1a;
    }
    
    .c1-30 {
      fill: #732626;
    }
    
    .c1-40 {
      fill: #993333;
    }
    
    .c1-50 {
      fill: #bf4040;
    }
    
    .c1-60 {
      fill: #cc6666;
    }
    
    .c1-70 {
      fill: #d98c8c;
    }
    
    .c1-80 {
      fill: #e6b3b3;
    }
    
    .c1-90 {
      fill: #f2d9d9;
    }
    
    .c1-100 {
      fill: white;
    }
    
    .c2-10 {
      fill: #17260d;
    }
    
    .c2-20 {
      fill: #2f4d1a;
    }
    
    .c2-30 {
      fill: #467326;
    }
    
    .c2-40 {
      fill: #5e9933;
    }
    
    .c2-50 {
      fill: #75bf40;
    }
    
    .c2-60 {
      fill: #91cc66;
    }
    
    .c2-70 {
      fill: #acd98c;
    }
    
    .c2-80 {
      fill: #c8e6b3;
    }
    
    .c2-90 {
      fill: #e3f2d9;
    }
    
    .c2-100 {
      fill: white;
    }
    </style>
</head>

<body>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="patch" viewBox="-20 0 75 80">
    <path class="c2-50" d="M18.8,32.6c-1.1-2.2-5.2-10.8-2.1-20.7c1.3-4,3.4-7,5-8.9c1.1,2.6,2.6,7.2,2.4,13.1
	C23.8,24.3,20.4,30.1,18.8,32.6z"/>
<path class="c2-60" d="M19.5,32.6c1.1-2.3,5.4-10.7,15.2-14.3c4-1.4,7.6-1.6,10.1-1.5c-1.4,2.5-4.1,6.5-8.9,9.9
	C29.2.........完整代码请登录后点击上方下载按钮下载查看