魔法棒动画效果-html代码-BFW代码库

代码语言：html
所属分类：粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Never-ending CSS Sparkler ⚡️🥳</title>

<style>
    *,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --bg: #04050d;
  --glow: rgba(246,213,143,0.5);
  --sparkler-top: #4f4139;
  --sparkler-bottom: #333;
  --spark: #fff;
}
body {
  min-height: 100vh;
  background: var(--bg);
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
}
span {
  position: absolute;
  border: 2px solid #008000;
  border-radius: 100%;
  opacity: 0.1;
  width: calc((100 / 3) * 1vw);
  height: 50vh;
  z-index: 3;
}
span:nth-of-type(1) {
  top: 0;
  left: 0;
}
span:nth-of-type(1):hover ~ .sparkler {
  --glow: rgba(134,226,213,0.5);
}
span:nth-of-type(1):hover ~ .sparkler .sparkler__spark {
  box-shadow: 0 0 20px 4px var(--shadow-2);
}
span:nth-of-type(2) {
  bottom: 0;
  right: 0;
}
span:nth-of-type(2):hover ~ .sparkler {
  --glow: rgba(213,184,255,0.5);
}
span:nth-of-type(2):hover ~ .sparkler .sparkler__spark {
  box-shadow: 0 0 20px 4px var(--shadow-3);
}
span:nth-of-type(3) {
  bottom: 0;
  left: 0;
}
span:nth-of-type(3):hover ~ .sparkler {
  --glow: rgba(236,100,75,0.5);
}
span:nth-of-type(3):hover ~ .sparkler .sparkler__spark {
  box-shadow: 0 0 20px 4px var(--shadow-4);
}
span:nth-of-type(4) {
  top: 0;
  right: 0;
}
span:nth-of-type(4):hover ~ .sparkler {
  --glow: rgba(82,179,217,0.5);
}
span:nth-of-type(4):hover ~ .sparkler .sparkler__spark {
  box-shadow: 0 0 20px 4px var(--shadow-5);
}
span:nth-of-type(5),
span:nth-of-type(6) {
  left: 0;
  right: 0;
  height: 25vh;
  width: 100vw;
}
span:nth-of-type(5):hover ~ .sparkler .sparkler__spark,
span:nth-of-type(6):hover ~ .sparkler .sparkler__spark {
  box-shadow: 0 0 20px 4px var(--shadow-6);
}
span:nth-of-type(5) {
  top: 0;
}
span:nth-of-type(6) {
  bottom: 0;
}
.sparkler {
  position: absolute;
  border-radius: 100%;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  box-shadow: 0 0 25px 25px var(--glow);
}
.sparkler:after,
.sparkler:before {
  content: '';
  height: 100px;
  width: 5px;
  background: var(--sparkler-top);
  position: absolute;
  top: 100%;
  left: 50%;
  border-radius: 2px;
  -webkit-transform: translate(-50%, 0) rotate(-40deg);
          transform: translate(-50%, 0) rotate(-40deg);
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.sparkler:before {
  height: 160px;
  width: 2px;
  background: var(--sparkler-bottom);
}
.sparkler__spark {
  height: 5px;
  position: absolute;
  width: 5px;
  box-shadow: 0 0 20px 4px var(--shadow);
  background: var(--spark);
  border-radius: 100%;
  -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 0);
          transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 0);
  -webkit-animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;
          animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;
  z-index: 2;
}
@-webkit-keyframes spark {
  to {
    opacity: 0;
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));
  }
}
@keyframes spark {
  to {
    opacity: 0;
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));
  }
}

  </style>

</head>
<body translate="no">
<div class="sparkler">
<div class="sparkler__spark" style="--rotation: 39; --delay: 0.2618281382751597; --speed: 1; --travel: 71; --shadow: #FCE43E;"></div>
<div class="sparkler__spark" style="--rotation: 315; --delay: 0.8334821806622676; --speed: 1; --travel: 121; --shadow: #F5E238;"></div>
<div class="sparkler__spark" style="--rotation: 87; --delay: 0.7874462092088417; --speed: 0.5; --travel: 78; --shadow: #f5e51b;"></div>
<div class="sparkler__spark" style="--rotation: 163; --delay: 0.09922602916915424; --speed: 0.4; --travel: 70; --shadow: #F5E238;"></div>
<div class="sparkler__spark" style="--rotation: 252; --delay: 0.913961683036097; --speed: 0.4; --travel: 62; --shadow: #F38437;"></div>
<div class="sparkler__spark" style="--rotation: 109; --delay: 0.9481339043178527; --speed: 0.5; --travel: 117; --shadow: #F5E238;"></div>
<div class="sparkler__spark" style="--rotation: 237; --delay: 0.7621259531843478; --speed: 0.6; --travel: 126; --shadow: #f5e51b;"></div>
<div class="sparkler__spark" style="--rotation: 10; --delay: 0.5422817935960884; --speed: 0.3; --travel: 108; --shadow: #fef160;"></div>
<div class="sparkler__spark" style="--rotation: 307; --delay: 0.24435202482478546; --speed: 0.7; --travel: 76; --shadow: #f5e51b;"></div>
<div class="sparkler__spark" style="--rotation: 225; --delay: 0.031308498435390186; --speed: 0.5; --travel: 142; --shadow: #F5E238;"></div>
<div class="sparkler__spark" style="--rotation: 274; --delay: 0.8226808235467911; --speed: 0.6; --travel: 126; --shadow: #FCE43E;"></div>
<div class="sparkler__spark" style="--rotation: 223; --delay: 0.9452714496583692; --speed: 1; --travel: 69; --shadow: #FCE43E;"></div>
<div class="sparkler__spark" style="--rotation: 36; --delay: 0.09657322824397685; --speed: 0.3; --travel: 116; --shadow: #F6D58F;"></div>
<div class="sparkler__spark" style="--rotation: 305; --delay: 0.001363077638721899; --speed: 0.7; --travel: 120; --shadow: #F5E238;"></div>
<div class="sparkler__spark" style="--rotation: 293; --delay: 0.9522100267983995; --speed: 0.5; --travel: 103; --shadow: #F6D58F;"></div>
<div class="sparkler__spark" style="--rotation: 197; --delay: 0.6875127971079489; --speed: 0.5; --travel: 53; --shadow: #fef160;"></div>
<div class="sparkler__spark" style="--rotation: 210; --delay: 0.314504519475453; --speed: 1; --travel: 55; --shadow: #F6D58F;"></div>
<div class="sparkler__spark" style="--rotation: 41; --delay: 0.8205078675117634; --speed: 0.8; --travel: 105; --shadow: #CB6E36;"></div>
<div class="sparkler__spark" style="--rotation: 342; --delay: 0.7154508079064854; --speed: 0.2; --travel: 140; --shadow: #fef160;"></div>
<div class="sparkler__spark" style="--rotation: 260; --delay: 0.4904542613176017; --speed: 0.9; --travel: 97; --shadow: #f5e653;"></div>
<div class="sparkler__spark" style="--rotation: 131; --delay: 0.5318841660504399; --speed: 0.3; --travel: 70; --shadow: #FC6205;"></div>
<div class="sparkler__spark" style="--rotation: 279; --delay: 0.4322224812963522; --speed: 0.9; --travel: 100; --shadow: #FCB404;"></div>
<div class="sparkler__spark" style="--rotation: 118; --delay: 0.8728462868328488; --speed: 0.9; --travel: 110; --shadow: #E45411;"></div>
<div class="sparkler__spark" style="--rotation: 13; --delay: 0.0838640081769777; --speed: 0.4; --travel: 70; --shadow: #FC6205;"></div>
<div class="sparkler__spark" style="--rotation: 176; --delay: 0.638617091531194; --speed: 0.8; --travel: 82; --shadow: #CB6E36;"></div>
<div class="sparkler__spark" style="--rotation: 14; --delay: 0.44779709502560805; --speed: 0.9; --travel: 52; --shadow: #FC6205;"></div>
<div class="sparkler__spark" style="--rotation: 118; --delay: 0.32085004461192224; --speed: 1; --travel: 62; --shadow: #CB6E36;"></div>
<div class="sparkler__spark" style="--rotation: 1; --delay: 0.6523705124571415; --speed: 0.3; --travel: 80; --shadow: #f5e51b;"></div>
<div class="sparkler__spark" style="--rotation: 143; --delay: 0.5810489369679983; --speed: 0.4; --travel: 71; --shadow: #FC6205;"></div>
<div class="sparkler__spark" style="--rotation: 74; --delay: 0.647902918631919; --speed: 0.6; --travel: 79; --shadow: #fef160;"></div>
<div class="sparkler__spark" style="--rotation: 78; --delay: 0.24560965944062052; --speed: 0.6; --travel: 77; --shadow: #EBCB6B;"></div>
<div class="sparkler__spark" style="--rotation: 172; --delay: 0.46722032112113876; --speed: 0.9; --travel: 150; --shadow: #f5e51b;"></div>
<div class="sparkler__spark" style="--rotation: 220; --delay: 0.4509892327849008; --speed: 0.3; --travel: 131; --shadow: #E4700C;"></div>
<div class="sparkler__spark" style="--rotation: 215; --delay: 0.9800317423239746; --speed: 0.6; --travel: 87; --shadow: #FC6205;"></div>
<div class="sparkler__spark" style="--rotation: 227; --delay: 0.8275002010980326; --speed: 0.4; --travel: 104; --shadow: #fef160;"></div>
<div class="sparkler__spark" style="--rotation: 254; --delay: 0.5485767906821144; --speed: 0.3; --travel: 145; --shadow: #EBCB6B;"></div>
<div class="sparkler__spark" style="--rotation: 1; --delay: 0.2567111727443532; --speed: 0.9; --travel: 66; --shadow: #fef160;"></div>
<div class="sparkler__spark" style="--rotation: 156; --delay: 0.9497796435390184; --speed: 0.6; --travel: 69; --shadow: #FCE43E;"></div>
<div class="sparkler__spark" style="--rotation: 127; --delay: 0.24461732208530318; --speed: 0.9; --travel: 88; --shadow: #F38437;"></div>
<div class="sparkler__spark" style="--rotation: 272; --delay: 0.7212108665419521; --speed: 0.8; --travel: 137; --shadow: #f5e51b;"></div>
<div class="sparkler__spark" style="--rotation: 344; --delay: 0.7146108106751583; --speed: 0.8; --travel: 136; --shadow: #f5e653;"></div>
<div class="sparkler__spark" style="--rota.........完整代码请登录后点击上方下载按钮下载查看