scss+gsap实现跟随鼠标的萤火虫粒子动画效果代码-html代码-BFW代码库

scss+gsap实现跟随鼠标的萤火虫粒子动画效果代码

代码语言：html

所属分类：动画

代码描述：scss+gsap实现跟随鼠标的萤火虫粒子动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
<style type = 'text/scss'>

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");

$ring-size: 120px;

$angle: 360deg;
:root {
        --ring-size: 200px;
        --angle: -360deg;
}
body {
        background: linear-gradient(to top, #4c234a, #0f1532);
        color:#20e3a2;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        transform-style: preserve-3d;
        overflow: hidden;
}

.particle {
        position: absolute;
        z-index: 0;
        transform-style: preserve-3d;


        &::after {
                content: "";
                width: 4px;
                position: absolute;
                height: 4px;
                background: yellow;
                border-radius: 100%;
        }
}

@for $i from 1 through 100 {
        $z: (random(360) * 0.3deg); //
        $y: (random(360) * 0.3deg); //

        .particle:nth-child(#{$i}) {
                border-radius: 100%;
                animation: birth#{$i} 100s infinite linear;
        }

        @keyframes birth#{$i} {
                0% {
                        transform: rotateZ($z) rotateY($y) translateX(($ring-size));
                }
                50% {
                        transform: rotateZ($z * 50) rotateY($y * 50) translateX(($ring-size));
                }
                100% {
                        transform: rotateZ($z) rotateY($y) translateX(($ring-size));
                }
        }
}



// Stars

@function generateStart($n) {
    $value: "#{random(2000)}px #{random(2000)}px rgba(165,190,195,#{random(10)/10})";
    @for $i from 0 through $n {
        $value: "#{$value} , #{random(2000)}px #{random(2000)}px rgba(184,174,131,#{random(10)/10})";
    }
    @return unquote($value);
}

$shadows-small: generateStart(500);
$shadows-medium: generateStart(400);
$shadows-big: generateStart(300);

#stars {
    width: 2px;
    height: 2px;
    box-shadow: $shadows-small;
    background: transparent;
    border-radius: 100%;
    animation: blink 2s infinite;
    position: absolute;
    left: 0;
    top: 0;
}

#stars2 {
    width: 3px;
    height: 3px;
    box-shadow: $shadows-medium;
    background: transparent;
    border-radius: 100%;
    animation: blink 4s infinite;
    position: absolute;
    left: 0;
    top: 0;
}

#stars3 {
    width: 4px;
    height: 4px;
    box-shadow: $shadows-big;
    background: transparent;
    border-radius: 100%;
    animation: blink 3s infinite;
    position: absolute;
    left: 0;
    top: 0;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

</style>


  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sass.sync.js"></script>
    <script>
 
     const styleEls = document.querySelectorAll('style');

       styleEls.forEach(styleEl => {
           const type = styleEl.getAttribute('type');

           if (type == 'text/scss') {



               Sass.compile(styleEl.innerHTML, funct.........完整代码请登录后点击上方下载按钮下载查看