js+css实现炫酷边框走光按钮点击碎纸削喷射庆祝动画代码-html代码-BFW代码库

js+css实现炫酷边框走光按钮点击碎纸削喷射庆祝动画代码

代码语言：html

所属分类：动画

代码描述：js+css实现炫酷边框走光按钮点击碎纸削喷射庆祝动画代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@800&family=Great+Vibes&family=Montserrat:wght@200;400&family=Outfit:wght@400;800&display=swap");
@property --ga {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gb {
  syntax: "<angle>";
  initial-value: 180deg;
  inherits: false;
}
:root {
  --rainbow: oklch(72% 0.33 12), oklch(78% 0.3 55), oklch(88% 0.26 100),
    oklch(80% 0.3 155), oklch(72% 0.33 210), oklch(68% 0.32 270),
    oklch(74% 0.34 320), oklch(72% 0.33 12);
  --spin-a: spinA 4s linear infinite;
  --spin-b: spinB 4s linear infinite;
  --radius: 9999px;
  --glow-blur-tight: clamp(5px, 0.8vw, 20px);
  --glow-blur-wide: clamp(12px, 2vw, 56px);
  --glow-blur-bloom: clamp(24px, 4vw, 120px);
  --glow-inset-tight: clamp(-2px, -0.3vw, -6px);
  --glow-inset-mid: clamp(-1px, -0.2vw, -4px);
  --glow-inset-bloom: clamp(-6px, -0.8vw, -20px);
  --border-width: clamp(3px, 0.25vw, 7px);
  --btn-padding: clamp(0.7em, 1.8vw, 1.4em) clamp(1.8em, 4vw, 3.8em);
  --btn-font-size: clamp(1.1rem, 2.8vw, 4rem);
  --btn-bg-dark-start: oklch(14% 0.015 260);
  --btn-bg-dark-end: oklch(10% 0.012 260);
  --body-bg: oklch(8% 0.01 260);
}

button::before, button, .btn-wrap::before, .btn-wrap::after, .btn-wrap .bloom {
  border-radius: var(--radius);
  corner-shape: squircle;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  min-height: .........完整代码请登录后点击上方下载按钮下载查看