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