纯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;
    border-style: none;
    border-color: rgb(209, 92, 184);
  }

  .leaves:nth-child(1){
    height: 15vmin;
    width: 15vmin;
    bottom: 20%;
    right: 20%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }
  .leaves:nth-child(2){
    height: 15vmin;
    width: 15vmin;
    bottom: 10%;
    right: 40%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(3){
    height: 15vmin;
    width: 15vmin;
    bottom: 0%;
    right: 22%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(4){
    height: 15vmin;
    width: 15vmin;
    bottom: 0%;
    right: 50%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
}

  .leaves:nth-child(5){
    height: 15vmin;
    width: 15vmin;
    bottom: 22%;
    right: 55%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(6){
    height: 12vmin;
    width: 12vmin;
    bottom: 38%;
    right: 72%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(7){
    height: 15vmin;
    width: 15vmin;
    bottom: 8%;
    right: 74%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(8){
    height: 15vmin;
    width: 15vmin;
    bottom: 8%;
    right: -1%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(9){
    height: 12vmin;
    width: 12vmin;
    bottom: 32%;
    right: 2%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(10){
    height: 15vmin;
    width: 15vmin;
    bottom: 32%;
    right: 34%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(11){
    height: 14vmin;
    width: 14vmin;
    bottom: 47%;
    right: 52%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(12){
    height: 14vmin;
    width: 14vmin;
    bottom: 45%;
    right: 15%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(13){
    height: 13vmin;
    width: 13vmin;
    bottom: 58%;
    right: 33%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(14){
    height: 13vmin;
    width: 13vmin;
    bottom: 28%;
    right: 73%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--dark-leaves);
  }

  .leaves:nth-child(15){
    height: 10vmin;
    width: 10vmin;
    bottom: 28%;
    right: 73%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--medium-leaves);
  }

  .leaves:nth-child(16){
    height: 10vmin;
    width: 10vmin;
    bottom: 48%;
    right: 28%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--medium-leaves);
  }

  .leaves:nth-child(17){
    height: 10vmin;
    width: 10vmin;
    bottom: 32%;
    right: 34%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--medium-leaves);
  }

  .leaves:nth-child(18){
    height: 10vmin;
    width: 10vmin;
    bottom: 12%;
    right: 22%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--medium-leaves);
  }

  .leaves:nth-child(19){
    height: 10vmin;
    width: 10vmin;
    bottom: 9%;
    right: 62%;
    transform: rotate(+30deg);
    border-radius: 50%;
    background-color: var(--medium-leaves);
  }

  .leaves:nth-child(20){
    height: 10vmin;
    w.........完整代码请登录后点击上方下载按钮下载查看

网友评论0