js实现彩色圈圈悬浮冒泡背景动画效果代码-html代码-BFW代码库

js实现彩色圈圈悬浮冒泡背景动画效果代码

代码语言：html

所属分类：背景

代码描述：js实现彩色圈圈悬浮冒泡背景动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


</head>

<body>
    <div class="wrapper" id="wrapper"></div>


    <script>
     console.clear();

// Style Pixels
const numberOfPixels = 1000;
const pixelWidth = 30;
const pixelHeight = pixelWidth;
const pixelBorderRadius = 50;

// Random color function
const randomColor = (s, l) => `hsl(${Math.round(Math.random() * 360)}, ${s}%, ${l}%)`;
const pixelColorSaturation = 75;
const pixelColorLuminance = 50;

//CSS Toggle Class
const pixelToggle = `pixel--active`;

// Create a style element
const style = document.createElement("style");
// Append the style element to the head
document.head.append(style);

//Add the CSS to the style element

style.innerHTML = `
body {
  margin: 0;
  overflow: hidden;
}
.wrapper {
  width: 100vw;
  height: 100vh;
  background: ${randomColor(10,10)};
  display: flex;
}
.pixel {
  width: ${pixelWidth}px;
  height: ${pixelHeight}px;
  border-radius: ${pixelBorderRadius}%;
  position: absolute;
  transition: top 2s, left 2s, width .5s, height .5s, transform .5s;
  box-shadow: 0 0 20px 0 black;
}
.pixel--active{
  width: ${pixelWidth*2}px;
  height: ${pixelHeight*2}px;
}
`;

// Get the wrapper element
.........完整代码请登录后点击上方下载按钮下载查看