svg+gsap实现可调配置参数的电流边框动画效果代码-html代码-BFW代码库

svg+gsap实现可调配置参数的电流边框动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+gsap实现可调配置参数的电流边框动画效果代码

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

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

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

  
<style>

@layer normalize, base, demo;

@layer demo {
  svg {
    overflow: visible !important;
  }
  .wrapper {
    display: grid;
    grid-template: 1 / 1;
    filter: drop-shadow(0 0 1px 10px hsl(210 90% 80%));
  }
  .box {
    grid-area: 1 / 1;
    width: 300px;
    aspect-ratio: 1;
    filter: url(#noise);
    display: grid;
    place-items: center;
    
    &:nth-of-type(1) {
      filter: url(#noise2);
    }
    
    &:nth-of-type(1) .border {
      border-color: hsl(45 90% 75%);
      opacity: .75;
      filter: blur(1px) contrast(4) brightness(1.5);
    }
    &:nth-of-type(2) .border {
      border-color: hsl(210 90% 70%);
      border-width: 2px;
    }
  }
  .border {
    border: calc(var(--width, 4) * 1px) solid hsl(280 90% 50%);
    border-radius: calc(var(--radius) * 1px);
    width: calc(100% - 2rem);
    aspect-ratio: 1;
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='d.........完整代码请登录后点击上方下载按钮下载查看