css+div实现圆环旋转产生彩色粒子碎片动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：css+div实现圆环旋转产生彩色粒子碎片动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@property --ring-reveal {
  inherits: true;
  initial-value: 0%;
  syntax: '<percentage>';
}

:root {
  --size: 35vmin;
  --ring-thickness: calc(var(--size) * 0.2);
  --red: #ff4d00;
  --green: #38b24d;
  --yellow: #ebb624;
  --blue: #0f73ff;
  --base-speed: 1;
}

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

body {
  background: hsl(32 61% 94%);
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: 'Google Sans', sans-serif, system-ui;
  padding: 10vmin;
}
main {
  width: 100%;
  display: grid;
  place-items: center;
}
h1 {
  color: hsl(32 64% 66%);
  position: fixed;
  margin: 0;
  font-family: 'Google Sans', sans-serif, system-ui;
  bottom: 1rem;
  right: 1rem;
}

section {
  width: var(--size);
  aspect-ratio: 1;
  position: relative;
  -webkit-animation: scale-in calc(var(--base-speed) * 4s) both;
          animation: scale-in calc(var(--base-speed) * 4s) both;
}

@-webkit-keyframes scale-in {
  0% {
    transform: scale(0);
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0);
  }
}
.sling-ring {
  height: 100%;
  aspect-ratio: 1;
  position: relative;
}
.sling-ring__ring {
  --base-rotation: -120deg;
  --starting-point: calc(360 * -0.125deg);
  --ring-reveal: 0%;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  transform: rotate(0deg);
  border-color: var(--red) var(--green) var(--yellow) var(--blue);
  mask: conic-gradient(from var(--starting-point), #000 var(--ring-reveal), transparent var(--ring-reveal));
  -webkit-mask: conic-gradient(from var(--starting-point), #000 var(--ring-reveal), transparent var(--ring-reveal));
  -webkit-animation: reveal calc(var(--base-speed) * 1s) both ease-in, rotate 10s infinite linear;
          animation: reveal calc(var(--base-speed) * 1s) both ease-in, rotate 10s infinite linear;
  z-index: 2;
}

img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: fade-in calc(var(--base-speed) * 1s) calc(var(--base-speed) * 0.25s) ease-in both;
          animation: fade-in calc(var(--base-speed) * 1s) calc(var(--base-speed) * 0.25s) ease-in both;
}

.sling-ring__ring--particles {
  border: none;
  -webkit-mask: none;
}
.sling-ring__particle-pen {
  aspect-ratio: 1;
  position: absolute;
  inset: calc(var(--ring-thickness) * -1);
  transform-origin: center;
  transform: rotate(calc(((360 / var(--particle-count)) * var(--index)) * 1deg));
}
.sling-ring__particle-start {
  position: absolute;
  height: calc(var(--ring-thickness) * 1);
  aspect-ratio: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotate(-90deg);
  background: rgba(255,0,0,0.2);
}
.sling-ring__particle {
  height: calc(var(--size, 100) * 1%);
  aspect-ratio: 1;
  background: hsl(var(--hue, 280), 100%, calc(var(--lightness, 50) * 1%));
  position: absolute;
  top: calc(var(--x, 50) * 1%);
  left: calc(var(--y, 50) * 1%);
  -webkit-animation: blast 0.85s infinite both ease-out, fade-away 0.85s infinite both;
          animation: blast 0.85s infinite both ease-out, fade-away 0.85s infinite both;
  -webkit-animation-delay: calc((var(--base-delay, 0) + var(--delay, 0)) * 1s);
          animation-delay: calc((var(--base-delay, 0) + var(--delay, 0)) * 1s);
}
.sling-ring--particles-real .sling-ring__particle {
  border-radius: calc(var(--radius, 50) * 1%);
}
.sling-ring--particles-real .sling-ring__particle-start {
  background: none;
}
.sling-ring--particles-real img {
  -webkit-animation-delay: calc((var(--particle-count) / 5) * 0.75s);
          animation-delay: calc((var(--particle-count) / 5) * 0.75s);
}


@-webkit-keyframes reveal {
  to {
    --ring-reveal: 100%;
  }
}


@keyframes reveal {
  to {
    --ring-reveal: 100%;
  }
}

@-webkit-keyframes rotate-in {
  from {
    transform: rotate(var(--base-rotation, 0deg));
  }
}

@keyframes rotate-in {
  from {
    transform: rotate(var(--base-rotation, 0deg));
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes blast {
  from {
    transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(0) translate(0, 0);
  }
  to {
    transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(1.2) translate(0, calc((var(--ring-thickness) * var(--distance, 5)) * -1));
  }
}

@keyframes blast {
  from {
    transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(0) translate(0, 0);
  }
  to {
    transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(1.2) translate(0, calc((var(--ring-thickness) * var(--distance, 5)) * -1));
  }
}

@-webkit-keyframes fade-away {
  0%, 75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-away {
  0%, 75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>



</head>

<body  >
  <main>
  <h1>Tap to replay</h1>
  <section>
    <div class="sling-ring sling-ring--particles sling-ring--particles-real" style="--particle-count: 14">
      <div class="sling-ring__ring sling-ring__ring--particles">
        <div class="sling-ring__particle-pen" style="--index: 0; --base-delay: 0;">
          <div class="sling-ring__particle-start">
            <div class="sling-ring__particle" style="--radius: 24; --hue: undefined; --lightness: 23; --size: 26; --distance: 3; --x: 21; --y: 86; --delay: 0.25; --rotation: -3;"></div>
            <div class="sling-ring__particle" style="--radius: 30; --hue: undefined; --lightness: 73; --size: 37; --distance: 4; --x: 41; --y: 43; --delay: 0.47; --rotation: -22;"></div>
            <div class="sling-ring__particle" style="--radius: 21; --hue: undefined; --lightness: 37; --size: 53; --distance: 5; --x: 87; --y: 41; --delay: 0.38; --rotation: -4;"></div>
            <div class="sling-ring__particle" style="--radius: 35; --hue: undefined; --lightness: 75; --size: 19; --distance: 5; --x: 19; --y: 63; --delay: 0.7; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 25; --size: 23; --distance: 4; --x: 16; --y: 41; --delay: 0.39; --rotation: -28;"></div>
            <div class="sling-ring__particle" style="--radius: 27; --hue: undefined; --lightness: 87; --size: 54; --distance: 6; --x: 2; --y: 78; --delay: 0.19; --rotation: -5;"></div>
            <div class="sling-ring__particle" style="--radius: 49; --hue: undefined; --lightness: 53; --size: 13; --distance: 5; --x: 3; --y: 52; --delay: 0.64; --rotation: -27;"></div>
            <div class="sling-ring__particle" style="--radius: 34; --hue: undefined; --lightness: 84; --size: 80; --distance: 6; --x: 47; --y: 56; --delay: 0.54; --rotation: -24;"></div>
            <div class="sling-ring__particle" style="--radius: 24; --hue: undefined; --lightness: 23; --size: 44; --distance: 4; --x: 38; --y: 100; --delay: 0.66; --rotation: -30;"></div>
            <div class="sling-ring__particle" style="--radius: 3; --hue: undefined; --lightness: 57; --size: 58; --distance: 4; --x: 79; --y: 75; --delay: 0.94; --rotation: -26;"></div>
            <div class="sling-ring__particle" style="--radius: 45; --hue: undefined; --lightness: 69; --size: 18; --distance: 6; --x: 24; --y: 84; --delay: 0.5; --rotation: -25;"></div>
            <div class="sling-ring__particle" style="--radius: 3; --hue: undefined; --lightness: 43; --size: 75; --distance: 5; --x: 71; --y: 51; --delay: 0.4; --rotation: -4;"></div>
            <div class="sling-ring__particle" style="--radius: 46; --hue: undefined; --lightness: 72; --size: 43; --distance: 4; --x: 29; --y: 99; --delay: 0.37; --rotation: 0;"></div>
            <div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 82; --size: 31; --distance: 6; --x: 43; --y: 95; --delay: 0.49; --rotation: -25;"></div>
            <div class="sling-ring__particle" style="--radius: 43; --hue: undefined; --lightness: 61; --size: 43; --distance: 5; --x: 90; --y: 88; --delay: 0.26; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 28; --hue: undefined; --lightness: 85; --size: 31; --distance: 6; --x: 43; --y: 97; --delay: 0.64; --rotation: -4;"></div>
            <div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 20; --size: 80; --distance: 5; --x: 9; --y: 21; --delay: 0.26; --rotation: -11;"></div>
            <div class="sling-ring__particle" style="--radius: 37; --hue: undefined; --lightness: 37; --size: 66; --distance: 5; --x: 1; --y: 63; --delay: 0.03; --rotation: -5;"></div>
            <div class="sling-ring__particle" style="--radius: 26; --hue: undefined; --lightness: 69; --size: 68; --distance: 4; --x: 96; --y: 52; --delay: 0.91; --rotation: -19;"></div>
            <div class="sling-ring__particle" style="--radius: 27; --hue: undefined; --lightness: 56; --size: 27; --distance: 7; --x: 41; --y: 94; --delay: 0.68; --rotation: 0;"></div>
            <div class="sling-ring__particle" style="--radius: 35; --hue: undefined; --lightness: 65; --size: 38; --distance: 5; --x: 70; --y: 50; --delay: 0.82; --rotation: -30;"></div>
            <div class="sling-ring__particle" style="--radius: 34; --hue: undefined; --lightness: 21; --size: 33; --distance: 3; --x: 0; --y: 85; --delay: 0.52; --rotation: -26;"></div>
            <div class="sling-ring__particle" style="--radius: 26; --hue: undefined; --lightness: 67; --size: 69; --distance: 4; --x: 100; --y: 88; --delay: 0.54; --rotation: -6;"></div>
            <div class="sling-ring__particle" style="--radius: 44; --hue: undefined; --lightness: 63; --size: 33; --distance: 7; --x: 52; --y: 70; --delay: 0.53; --rotation: 0;"></div>
            <div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 20; --size: 41; --distance: 3; --x: 39; --y: 87; --delay: 0.77; --rotation: -30;"></div>
            <div class="sling-ring__particle" style="--radius: 29; --hue: undefined; --lightness: 69; --size: 22; --distance: 3; --x: 87; --y: 38; --delay: 0.71; --rotation: -28;"></div>
            <div class="sling-ring__particle" style="--radius: 10; --hue: undefined; --lightness: 27; --size: 77; --distance: 3; --x: 69; --y: 16; --delay: 0.66; --rotation: -13;"></div>
            <div class="sling-ring__particle" style="--radius: 26; --hue: undefined; --lightness: 22; --size: 80; --distance: 6; --x: 6; --y: 53; --delay: 0.5; --rotation: -20;"></div>
            <div class="sling-ring__particle" style="--radius: 15; --hue: undefined; --lightness: 47; --size: 47; --distance: 3; --x: 1; --y: 75; --delay: 0.38; --rotation: -30;"></div>
            <div class="sling-ring__particle" style="--radius: 19; --hue: undefined; --lightness: 65; --size: 71; --distance: 5; --x: 18; --y: 12; --delay: 0.39; --rotation: -1;"></div>
          </div>
        </div>
        <div class="sling-ring__particle-pen" style="--index: 1; --base-delay: 0.2;">
          <div class="sling-ring__particle-start">
            <div class="sling-ring__particle" style="--radius: 37; --hue: 18; --lightness: 24; --size: 27; --distance: 4; --x: 100; --y: 4; --delay: 0.02; --rotation: -28;"></div>
            <div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 33; --size: 35; --distance: 4; --x: 13; --y: 53; --delay: 0.49; --rotation: -17;"></div>
            <div class="sling-ring__particle" style="--radius: 47; --hue: 18; --lightness: 37; --size: 53; --distance: 6; --x: 57; --y: 5; --delay: 0.33; --rotation: -17;"></div>
            <div class="sling-ring__particle" style="--radius: 5; --hue: 18; --lightness: 43; --size: 65; --distance: 3; --x: 13; --y: 61; --delay: 0.14; --rotation: -13;"></div>
            <div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 64; --size: 47; --distance: 7; --x: 38; --y: 98; --delay: 0.98; --rotation: 0;"></div>
            <div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 80; --size: 25; --distance: 6; --x: 30; --y: 15; --delay: 0.2; --rotation: -11;"></div>
            <div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 31; --size: 49; --distance: 4; --x: 35; --y: 52; --delay: 0.73; --rotation: -25;"></div>
            <div class="sling-ring__particle" style="--radius: 24; --hue: 18; --lightness: 63; --size: 55; --distance: 5; --x: 10; --y: 58; --delay: 0.53; --rotation: -9;"></div>
            <div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 20; --size: 67; --distance: 6; --x: 71; --y: 2; --delay: 0.16; --rotation: -4;"></div>
            <div class="sling-ring__particle" style="--radius: 41; --hue: 18; --lightness: 70; --size: 50; --distance: 6; --x: 96; --y: 89; --delay: 0.16; --rotation: -10;"></div>
            <div class="sling-ring__particle" style="--radius: 16; --hue: 18; --lightness: 69; --size: 20; --distance: 6; --x: 22; --y: 82; --delay: 0.76; --rotation: -25;"></div>
            <div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 32; --size: 16; --distance: 7; --x: 85; --y: 7; --delay: 0.08; --rotation: -11;"></div>
            <div class="sling-ring__particle" style="--radius: 31; --hue: 18; --lightness: 72; --size: 43; --distance: 3; --x: 37; --y: 37; --delay: 0.83; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 10; --hue: 18; --lightness: 36; --size: 64; --distance: 4; --x: 33; --y: 66; --delay: 0.94; --rotation: -10;"></div>
            <div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 82; --size: 26; --distance: 4; --x: 94; --y: 59; --delay: 0.75; --rotation: -17;"></div>
            <div class="sling-ring__particle" style="--radius: 5; --hue: 18; --lightness: 31; --size: 44; --distance: 3; --x: 48; --y: 66; --delay: 0.82; --rotation: -9;"></div>
            <div class="sling-ring__particle" style="--radius: 10; --hue: 18; --lightness: 35; --size: 78; --distance: 5; --x: 58; --y: 93; --delay: 0.59; --rotation: -12;"></div>
            <div class="sling-ring__particle" style="--radius: 28; --hue: 18; --lightness: 66; --size: 59; --distance: 3; --x: 79; --y: 49; --delay: 0.58; --rotation: -22;"></div>
            <div class="sling-ring__particle" style="--radius: 28; --hue: 18; --lightness: 88; --size: 68; --distance: 7; --x: 13; --y: 58; --delay: 0.39; --rotation: -16;"></div>
            <div class="sling-ring__particle" style="--radius: 31; --hue: 18; --lightness: 60; --size: 18; --distance: 4; --x: 36; --y: 95; --delay: 0.77; --rotation: -15;"></div>
            <div class="sling-ring__particle" style="--radius: 28; --hue: 18; --lightness: 50; --size: 65; --distance: 6; --x: 53; --y: 91; --delay: 0.51; --rotation: -23;"></div>
            <div class="sling-ring__particle" style="--radius: 9; --hue: 18; --lightness: 67; --size: 52; --distance: 3; --x: 34; --y: 84; --delay: 1; --rotation: -19;"></div>
            <div class="sling-ring__particle" style="--radius: 16; --hue: 18; --lightness: 26; --size: 70; --distance: 3; --x: 15; --y: 93; --delay: 0.81; --rotation: -10;"></div>
            <div class="sling-ring__particle" style="--radius: 17; --hue: 18; --lightness: 70; --size: 66; --distance: 5; --x: 86; --y: 25; --delay: 0.13; --rotation: -2;"></div>
            <div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 72; --size: 48; --distance: 3; --x: 14; --y: 41; --delay: 0.28; --rotation: -22;"></div>
            <div class="sling-ring__particle" style="--radius: 32; --hue: 18; --lightness: 88; --size: 50; --distance: 3; --x: 15; --y: 29; --delay: 0.34; --rotation: -12;"></div>
            <div class="sling-ring__particle" style="--radius: 21; --hue: 18; --lightness: 37; --size: 45; --distance: 3; --x: 18; --y: 59; --delay: 0.73; --rotation: -25;"></div>
            <div class="sling-ring__particle" style="--radius: 39; --hue: 18; --lightness: 70; --size: 79; --distance: 6; --x: 20; --y: 47; --delay: 0.39; --rotation: -7;"></div>
            <div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 69; --size: 11; --distance: 3; --x: 23; --y: 17; --delay: 0.14; --rotation: -27;"></div>
            <div class="sling-ring__particle" style="--radius: 33; --hue: 18; --lightness: 41; --size: 71; --distance: 5; --x: 41; --y: 21; --delay: 0.41; --rotation: -4;"></div>
          </div>
        </div>
        <div class="sling-ring__particle-pen" style="--index: 2; --base-delay: 0.4;">
          <div class="sling-ring__particle-start">
            <div class="sling-ring__particle" style="--radius: 8; --hue: 18; --lightness: 85; --size: 64; --distance: 7; --x: 84; --y: 35; --delay: 0.61; --rotation: -6;"></div>
            <div class="sling-ring__particle" style="--radius: 1; --hue: 18; --lightness: 77; --size: 32; --distance: 4; --x: 4; --y: 64; --delay: 0.01; --rotation: -19;"></div>
            <div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 51; --size: 66; --distance: 6; --x: 15; --y: 91; --delay: 0.64; --rotation: -22;"></div>
            <div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 56; --size: 15; --distance: 4; --x: 93; --y: 24; --delay: 0.27; --rotation: -16;"></div>
            <div class="sling-ring__particle" style="--radius: 20; --hue: 18; --lightness: 48; --size: 72; --distance: 7; --x: 23; --y: 83; --delay: 0.06; --rotation: -28;"></div>
            <div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 64; --size: 15; --distance: 7; --x: 13; --y: 87; --delay: 0.35; --rotation: -20;"></div>
            <div class="sling-ring__particle" style="--radius: 22; --hue: 18; --lightness: 70; --size: 22; --distance: 6; --x: 87; --y: 11; --delay: 0.24; --rotation: -19;"></div>
            <div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 41; --size: 54; --distance: 7; --x: 37; --y: 91; --delay: 0.89; --rotation: 0;"></div>
            <div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 82; --size: 28; --distance: 7; --x: 85; --y: 56; --delay: 0.29; --rotation: -20;"></div>
            <div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 33; --size: 32; --distance: 3; --x: 46; --y: 88; --delay: 0.76; --rotation: -10;"></div>
            <div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 59; --size: 44; --distance: 6; --x: 67; --y: 70; --delay: 0.8; --rotation: -15;"></div>
            <div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 28; --size: 58; --distance: 4; --x: 45; --y: 23; --delay: 0.55; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 46; --hue: 18; --lightness: 59; --size: 73; --distance: 7; --x: 84; --y: 54; --delay: 0.51; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 4; --hue: 18; --lightness: 69; --size: 38; --distance: 3; --x: 48; --y: 0; --delay: 0.44; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 17; --hue: 18; --lightness: 42; --size: 32; --distance: 3; --x: 45; --y: 1; --delay: 0.87; --rotation: -2;"></div>
            <div class="sling-ring__particle" style="--radius: 47; --hue: 18; --lightness: 56; --size: 27; --distance: 6; --x: 74; --y: 56; --delay: 0.75; --rotation: -23;"></div>
            <div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 63; --size: 55; --distance: 5; --x: 73; --y: 67; --delay: 0.68; --rotation: -13;"></div>
            <div class="sling-ring__particle" style="--radius: 33; --hue: 18; --lightness: 55; --size: 50; --distance: 7; --x: 89; --y: 77; --delay: 0.49; --rotation: -27;"></div>
            <div class="sling-ring__particle" style="--radius: 13; --hue: 18; --lightness: 78; --size: 14; --distance: 3; --x: 60; --y: 8; --delay: 0.79; --rotation: 0;"></div>
            <div class="sling-ring__particle" style="--radius: 26; --hue: 18; --lightness: 71; --size: 25; --distance: 6; --x: 84; --y: 88; --delay: 0.06; --rotation: -18;"></div>
            <div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 73; --size: 26; --distance: 6; --x: 50; --y: 99; --delay: 0.19; --rotation: -10;"></div>
            <div class="sling-ring__particle" style="--radius: 50; --hue: 18; --lightness: 78; --size: 64; --distance: 4; --x: 65; --y: 15; --delay: 0.58; --rotation: -16;"></div>
            <div class="sling-ring__particle" style="--radius: 4; --hue: 18; --lightness: 32; --size: 17; --distance: 7; --x: 97; --y: 40; --delay: 0.55; --rotation: -19;"></div>
            <div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 56; --size: 66; --distance: 4; --x: 21; --y: 85; --delay: 0.03; --rotation: -2;"></div>
            <div class="sling-ring__particle" style="--radius: 32; --hue: 18; --lightness: 87; --size: 56; --distance: 5; --x: 82; --y: 2; --delay: 0.27; --rotation: -6;"></div>
            <div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 49; --size: 76; --distance: 3; --x: 33; --y: 57; --delay: 0.94; --rotation: -6;"></div>
            <div class="sling-ring__particle" style="--radius: 0; --hue: 18; --lightness: 21; --size: 64; --distance: 3; --x: 9; --y: 99; --delay: 0.52; --rotation: -24;"></div>
            <div class="sling-ring__particle" style="--radius: 35; --hue: 18; --lightness: 89; --size: 45; --distance: 7; --x: 15; --y: 45; --delay: 0.19; --rotation: -16;"></div>
            <div class="sling-ring__particle" style="--radius: 5; --hue: 18; --lightness: 26; --size: 11; --distance: 5; --x: 100; --y: 12; --delay: 0.55; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 45; --size: 40; --distance: 4; --x: 26; --y: 80; --delay: 0.06; --rotation: -9;"></div>
          </div>
        </div>
        <div class="sling-ring__particle-pen" style="--index: 3; --base-delay: 0.6;">
          <div class="sling-ring__particle-start">
            <div class="sling-ring__particle" style="--radius: 50; --hue: 18; --lightness: 85; --size: 29; --distance: 3; --x: 90; --y: 52; --delay: 0.64; --rotation: -2;"></div>
            <div class="sling-ring__particle" style="--radius: 15; --hue: 18; --lightness: 20; --size: 34; --distance: 5; --x: 22; --y: 94; --delay: 0.65; --rotation: -17;"></div>
            <div class="sling-ring__particle" style="--radius: 11; --hue: 18; --lightness: 59; --size: 29; --distance: 4; --x: 19; --y: 39; --delay: 0.6; --rotation: -21;"></div>
            <div class="sling-ring__particle" style="--radius: 20; --hue: 18; --lightness: 47; --size: 75; --distance: 4; --x: 96; --y: 65; --delay: 0.02; --rotation: -16;"></div>
            <div class="sling-ring__particle" style="--radius: 25; --hue: 18; --lightness: 73; --size: 55; --distance: 3; --x: 23; --y: 58; --delay: 0.61; --rotation: -11;"></div>
            <div class="sling-ring__particle" style="--radius: 24; --hue: 18; --lightness: 23; --size: 13; --distance: 7; --x: 93; --y: 0; --delay: 0.35; --rotation: -20;"></div>
            <div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 23; --size: 37; --distance: 5; --x: 29; --y: 5; --delay: 0.59; --rotation: -5;"></div>
            <div class="sling-ring__particle" style="--radius: 31; --hue: 18; --lightness: 53; --size: 27; --distance: 3; --x: 74; --y: 38; --delay: 0.14; --rotation: -3;"></div>
            <div class="sling-ring__particle" style="--radius: 11; --hue: 18; --lightness: 28; --size: 56; --distance: 7; --x: 36; --y: 59; --delay: 0.92; --rotation: -30;"></div>
            <div class="sling-ring__particle" style="--radius: 46; --hue: 18; --lightness: 74; --size: 14; --distance: 6; --x: 7; --y: 31; --delay: 0.99; --rotation: 0;"></div>
            <div class="sling-ring__particle" style="--radius: 1; --hue: 18; --lightness: 89; --size: 70; --distance: 7; --x: 78; --y: 69; --delay: 0.29; --rotation: -24;"></div>
            <div class="sling-ring__particle" style="--radius: 11; --hue: 18; --lightness: 53; --size: 25; --distance: 3; --x: 62; --y: 32; --delay: 0.51; --rotation: -11;"></div>
            <div class="sling-ring__particle" style="--radius: 16; --hue: 18; --lightness: 33; --size: 46; --distance: 5; --x: 76; --y: 43; --delay: 0.04; --rotation: -15;"></div>
            <div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 87; --size: 16; --distance: 5; --x: 15; --y: 62; --delay: 0.65; --rotation: -15;"></div>
            <div class="sling-ring__particle" style="--radius: 26; --hue: 18; --lightness: 71; --size: 51; --distance: 3; --x: 83; --y: 70; --delay: 0.82; --rotation: -30;"></div>
            <div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 54; --size: 22; --distance: 3; --x: 39; --y: 79; --delay: 0.37; --rotation: -5;"></div>
            <div class="sling-ring__particle" style="--radius: 10; --hue: 18; --lightness: 28; --size: 22; --distance: 7; --x: 23; --y: 85; --delay: 0.06; --rotation: -5;"></div>
            <div class="sling-ring__particle" style="--radius: 23; --hue: 18; --lightness: 73; --size: 64; --distance: 4; --x: 46; --y: 33; --delay: 0.49; --rotation: -24;"></div>
            <div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 54; --size: 27; --distance: 7; --x: 66; --y: 76; --delay: 0.97; --rotation: -2;"></div>
            <div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 28; --size: 40; --distance: 5; --x: 12; --y: 87; --delay: 0.4; --rotation: -8;"></div>
            <div class="sling-ring__particle" style="--radius: 15; --hue: 18; --lightness: 69; --size: 68; --distance: 7; --x: 33; --y: 31; --delay: 0.74; --rotation: -2;"></div>
            <div class="sling-ring__particle" style="--radius: 22; --hue: 18; --lightness: 73; --size: 50; --distance: 5; --x: 97; --y: 76; --delay: 0.42; --rotation: -10;"></div>
            <div class="sling-ring__particle" style="--radius: 47; --hue: 18; --lightness: 33; --size: 46; --distance: 6; --x: 40; --y: 70; --delay: 0.83; --rotation: -13;"></div>
            <div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 88; --size: 14; --distance: 4; --x: 86; --y: 66; --delay: 0.91; --rotation: -7;"></div>
            <div class="sling-ring__particle" style="--radius: 34; --hue: 18; --lightness: 88; --size: 60; --distance: 7; --x: 84; --y: 59; --delay: 0.16; --rotation: -14;"></div>
            <div class="sling-ring__particle" style="--radius: 13; --hue: 18; --lightness: 81; --size: 48; --distance: 7; --x: 53; --y: 42; --delay: 0; --rotation: -12;"></div>
            <div class="sling-ring__particle" style="--radius: 44; --hue: 18; --lightness: 86; --size: 64; --distance: 3; --x: 62; --y: 83; --delay: 0.47; --rotation: -29;"></div>
            <div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 22; --size: 78; --distance: 3; --x: 35; --y: 78; --delay: 0.34; --rotation: -26;"></div>
            <div class="sling-ring__particle" style="--radius: 9; --hue: 18; --lightness: 21; --size: 50; --distance: 4; --x: 38; --y: 57; --delay: 0.93; --rotation: -30;"></div>
            <div class="sling-ring__particle" style="--radius: 24; --hue: 18; --lightness: 68; --size: 11; --distance: 3; --x: 36; --y: 95; --delay: 0.34; --rotation: -7;"></div>
          </div>
        </div>
        <div class="sling-ring__particle-pen" style="--index: 4; --base-delay: 0.8;">
          <div class="sling-ring__particle-start">
            <div class="sling-ring__particle" style="--radius: 10; --hue: 130; --lightness: 75; --size: 70; --distance: 6; --x: 64; --y: 8; --delay: 0.97; --rotation: -16;"></div>
            <div class="sling-ring__particle" style="--radius: 50; --hue: 130; --lightness: 49; --size: 72; --distance: 5; --x: 97; --y: 18; --delay: 0.2; --rotation: -26;"></div>
            <div class="sling-ring__particle&q.........完整代码请登录后点击上方下载按钮下载查看