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 bot.........完整代码请登录后点击上方下载按钮下载查看