鼠标点击星星飞舞效果-html代码-BFW代码库

鼠标点击星星飞舞效果

代码语言：html

所属分类：动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}
:root {
  --light: 95;
}
@media (prefers-color-scheme: dark) {
  :root {
    --light: 15;
  }
}
body {
  background: hsl(0, 0%, calc(var(--light) * 1%));
  min-height: 100vh;
  overflow: hidden;
  -webkit-transition: background 0.1s ease 0s;
  transition: background 0.1s ease 0s;
  touch-action: none;
}
.star {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  height: calc(var(--s) * 1vmin);
  width: calc(var(--s) * 1vmin);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg));
          transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg));
}
.star svg {
  height: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.star path {
  fill: hsl(var(--h), 100%, 75%);
}
h1 {
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 5rem;
  line-height: 5rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0;
}
</style>

</head>
<body translate="no">
<div class="star-container"></div>
<h1>👇</h1>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script>
<script >
const { gsap } = window;
const INSTRUCTIONS = document.querySelector('h1');
const CONTAINER = document.querySelector('.star-container');
const MARKUP = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.229167 13.465516">
      <path d="M12.3837664 11.69785L7.733081 9.97923l-3.5253893 3.48628.1973643-4.95414L0 6.23584l4.7726631-1.34321L5.5755782 0l2.7523037 4.124 4.9012845-.74829-3.071646 3.89198z" fill="#520"/>
    </svg>
  `;
const STATE = {
  BURSTING: false,
  X: null,
  Y: null,
  DEBOUNCE: null,
  REMOVE_DEB.........完整代码请登录后点击上方下载按钮下载查看