js实现星星碎片跟随鼠标散落动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现星星碎片跟随鼠标散落动画效果代码

代码标签: js 星星 碎片 跟随 鼠标 散落 动画

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

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

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


  
  
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap");
.star {
  transform-style: preserve-3d;
  width: 1px;
  height: 1px;
  position: absolute;
  color: red;
}

.star:before {
  position: absolute;
  content: "✦";
  color: inherit;
  inset: 0;
  text-shadow: 0 0 0.8em #fff5;
}

body {
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
  color: #F9F6EF;
  display: grid;
  place-content: center;
  background-image: radial-gradient(circle at 50% 50%, #2f3040, #1f2020);
}
</style>

  
  
</head>

<body translate="no">
  <h1>Move your mouse around</h1>
  
      <script >
let x1 = 0,y1 = 0;
const
dist_to_draw = 50,
delay = 1000,
fsize = [
'1.1rem', '1.4rem', '.8rem', '1.7rem'],

colors = [
'#E23636',
'#F9F3EE',
'#E1F8DC',
'#B8AFE6',
'#AEE1CD',
'#5EB0E5'],

rand = (min, max) =>
Math.floor(.........完整代码请登录后点击上方下载按钮下载查看

网友评论0