纯css实现卡通树效果-html代码-BFW代码库

纯css实现卡通树效果

代码语言：html

代码描述：纯css实现卡通树效果

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

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

<style>
:root{
    --back: white;
    --border: rgb(86, 86, 136);
    --dark-leaves: rgba(51, 83, 44, 0.76);
    --medium-leaves: rgba(151, 185, 112, 0.76);
    --light-leaves: rgba(198, 204, 109, 0.788);
    --extra-light-leaves: rgba(243, 245, 136, 0.788);
    --fruit-leaves: rgba(228, 183, 241, 0.788);
    --truck: rgb(56, 21, 21);
}

* {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background: var(--back);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 1em;
    border-color: var(--border);
  }

  .tree{ 
    position: relative;
    border-style: none;
    border-color: blue;
    height: 100vmin;
    width: 60vmin;
  }

  .trunk{
    z-index: -1;
    position: absolute;    
    bottom: 0em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-style: none;
    background-color: var(--truck);
    height: 50vmin;
    width: 5vmin;
    border-radius: 63% 37% 31% 69% / 60% 74% 26% 40% ;
  }

  .branch{
    position: relative;
    border-style: none;
    border-color: rgb(206, 177, 11);
    background-color: var(--truck);
  }

  .branch:nth-child(1){
    height: 19vmin;
    width: 2vmin;
    top: 2%;
    right: -120%;
    transform: rotate(+30deg);
    border-radius: 63% 37% 31% 69% / 60% 74% 26% 40% ;
  }

  .branch:nth-child(2){
    height: 15vmin;
    width: 2vmin;
    top: 0.5%;
    right: +70%;
    transform: rotate(-30deg);
    border-radius: 63% 37% 31% 69% / 60% 74% 26% 40% ;
}

  .toptree{
    position: absolute;    
    top: 0em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 80vmin;
    width: auto;
    border-style: none;
    border-color: rgb(207, 77, 190);
  }

  .leaves{
    position: absolute;.........完整代码请登录后点击上方下载按钮下载查看