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: &q.........完整代码请登录后点击上方下载按钮下载查看