css实现可拖动生长的树效果代码-html代码-BFW代码库

css实现可拖动生长的树效果代码

代码语言：html

所属分类：拖放

代码描述：css实现可拖动生长的树效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
<style>
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d1339;
}
:root {
  --pot: #73480d;
  --pot-brim: #8a570f;
}
.tree {
  --size: 40;
  height: calc(var(--size) * 1vmin);
  width: calc(var(--size) * 0.5vmin);
  position: relative;
  background: hsla(180, 50%, 50%, var(--show-container, 0));
  resize: vertical;
  overflow: hidden;
  min-height: calc(var(--size) * 0.7vmin);
  max-width: 50vmin;
  max-height: 90vmin;
  min-width: calc(var(--size) * 0.5vmin);
  display: flex;
  flex-direction: column;
}
.tree:before {
  content: '';
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 2vmin;
  height: calc(100% - 12vmin);
  background: #a18245;
  z-index: -1;
}
.tree:active .tree__arrow {
  display: none;
}
.tree__arrow {
  height: 30px;
  width: 20px;
  background: #fff;
  position: absolute;
  bottom: 15px;
  right: 0;
  transform-origin: 50% 100%;
  transform: rotate(-15deg);
  -webkit-clip-path: polygon(50% 100%, 100% 60%, 60% 60%, 65% 0, 35% 0, 35% 60%, 0 60%);
  clip-path: polygon(50% 100%, 100% 60%, 60% 60%, 65% 0, 35% 0, 35% 60%, 0 60%);
}
.tree__top {
  flex: 0 1 calc(var(--size) * 0.2vmin);
  position: absolute;
  top: 0;
  height: 15vmin;
  left: 50%;
  transform: translate(-50%, 0);
  min-height: calc(var(--size) * 0.2vmin);
  z-index: 2;
  width: 100%;
}
.tree__top:after {
  content: '';
  position: absolute;
  background: #1a9b18;
  top: 66%;
  left: 50%;
  width: 10vmin;
  height: 10vmin;
  transform: translate(-50%, 0);
  border-left: #295c17 1vmin solid;.........完整代码请登录后点击上方下载按钮下载查看