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, function(result) {
                   if (result.status == 0) {

                       const newStyleEl = document.createElement('style');
                       newStyleEl.textContent = result.text

                       document.head.appendChild(newStyleEl);

                   }
               })
           }
       });

    </script>

  
</head>

<body >
  <div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>

<!-- <h1>MOVE YOUR MOUSE ARROUND</h1> -->

<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></div>
</div>
<div class="particle">
	<div class="inner"></di.........完整代码请登录后点击上方下载按钮下载查看