js实现彩色方块下落落下动画效果代码-html代码-BFW代码库

js实现彩色方块下落落下动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现彩色方块下落落下动画效果代码

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

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

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

  
  
  
<style>
html,body {width:100%;height:100%;padding:0;margin:0;}
* {box-sizing:border-box}
.foil-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a2e 0%, #125 100%);
    cursor: pointer;
}

.foil-piece {
    position: absolute;
    background: linear-gradient(135deg, var(--foil-color-1) 0%, var(--foil-color-2) 50%, var(--foil-color-3) 100%);
    opacity: 0.8;
    top: -100px;
    border-radius: 0px;
    transform-origin: center;
    filter: brightness(1.1) contrast(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    transition: opacity 0.3s ease;
}

.foil-piece:hover {
    opacity: 1;
}
</style>


  
</head>

<body translate="no">
  <div id="foil-container" class="foil-container"></div>
  
    <script >
// Конфигурация с переменными
const config = {
    // 1) Размеры кусочков (в пикселях)
    sizes: {
        desktop: { min: 5, max: 30 },     // >= 1200px
        tablet: { min: 4, max: 25 },      // 720px - 1199px  
        mobile: { min: 3, max: 20 },      // 480px - 719px
        small: { min: 2, max: 15 }        // < 480px
    },
    
    // 2) Количество кусочков
    quantities: {
        desktop.........完整代码请登录后点击上方下载按钮下载查看