svg实现可修改参数的立体炫酷圣诞树动画效果代码-html代码-BFW代码库

svg实现可修改参数的立体炫酷圣诞树动画效果代码

代码语言：html

所属分类：动画

代码描述：svg实现可修改参数的立体炫酷圣诞树动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, debug;

@layer debug {
  [data-lights='false'] {
    .tree > div::before {
      opacity: 0;
    }
  }
  [data-unmask='true'] {
    .tree > div {
      -webkit-mask: none;
              mask: none;
      -webkit-clip-path: none;
              clip-path: none;
      outline: 1px dashed hsl(0 0% 100%);
      outline-offset: 1px;

      &::after {
        outline: 1px dashed yellow;
        outline-offset: 2px;
      }
      &::before {
        outline: 1px dashed green;
        outline-offset: 4px;
      }
    }
  }
}

@layer demo {
  .star {
    width: 5ch;
    left: 50%;
    position: absolute;
    bottom: 100%;
    z-index: 2;
    transform-style: preserve-3d;
    transform: translate3d(-50%, 40%, 130px) rotateX(30deg) rotateY(-30deg);
    filter: drop-shadow(0 0 6px yellow);

    path {
      stroke: white;
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      -webkit-animation: draw 1s 4s both;
              animation: draw 1s 4s both;
      transform-box: fill-box;
      transform-origin: 50% 50%;
      opacity: 0.1;

      &:nth-of-type(1) {
        -webkit-clip-path: inset(0 50% 0 0);
                clip-path: inset(0 50% 0 0);
      }

      &:nth-of-type(2) {
        -webkit-clip-path: inset(0 50% 0 0);
                clip-path: inset(0 50% 0 0);
        /* opacity: 0; */
        scale: -1 1;
      }
    }
  }
  .scene {
    --character-width: 1; /* In "ch" units */
    --inner-angle: calc((360 / var(--sides)) * 1deg);
    --radius: calc((var(--character-width, 1) / sin(var(--inner-angle))) * 1ch);
    transform-style: preserve-3d;
    position: relative;
  }
  .split {
    background: hsl(0 0% 0% / 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--radius) * 5);
    height: calc(var(--height.........完整代码请登录后点击上方下载按钮下载查看