魔法棒动画效果-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 2.........完整代码请登录后点击上方下载按钮下载查看