div+js实现闪烁的五颜六色的五角星星星动画效果代码-html代码-BFW代码库

div+js实现闪烁的五颜六色的五角星星星动画效果代码

代码语言：html

所属分类：动画

代码描述：div+js实现闪烁的五颜六色的五角星星星动画效果代码

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

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

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

  
<style>
body {
  margin: 0;
  overflow: hidden;
  background-color: black;
}

.star {
  position: absolute;
  width: 40px; /* nSize */
  height: 40px; /* nSize */ 
  background-color: #222; /* baseColor */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  transform-origin: center center;
  animation: swing linear infinite;
}

@keyframes swing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: translate(0%, 80%) scale(0.33) rotate(120deg);
    //filter: blur(1rem);
  }
}
</style>


  
  
</head>

<body translate="no">
  
  
      <script >
/* Source: https://codepen.io/tommyho tommyho510@gmail.com */

nCol = 16;
nRow = 16;
nSize = 40;
maxPeroid = 3000;
maxInterval = 5000;
baseColor = "#222";

// Function to generate a random color
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Function to set a random color to a star
function setRandomColor(star) {
  const color = getRandomColor();
  star.style.backgroundColor = color;
}

// Function to.........完整代码请登录后点击上方下载按钮下载查看