css+js实现卡通板球昆虫网格布局效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+js实现卡通板球昆虫网格布局效果代码

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

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

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

  
  
  
<style>
/* Variables and Configuration */
:root {
        --width: 90px;
        --height: calc(1.5 * var(--width));
        --gap: 16px;
        /* More space between the grasshoppers */
        --color-main: #8ae82a;
        /* Bright green for the main body */
        --color-antenna: #4a7c30;
        /* Darker brown for the antennas */
        --color-eye: #000000;
        /* Black for the eyes */
        --color-wing: #9ff542;
        /* Light green for the wings */
        --color-leg: #4a7c30;
        /* Darker brown for the legs */
        --belly-color: #f7d4a8;
        /* Light orange for the belly */
        --bg-color: #fbf8f2;
        /* Lighter background for better contrast */
        --outline-color: rgba(0, 0, 0, 0.3);
        /* Color for the outlines */

        /* Improved color palette for variations - More contrast to illustrate the Cicada principle */
        --color-1: #85ee35;
        /* Very light green - almost yellow */
        --color-2: #6bc220;
        /* Light green */
        --color-3: #4a9a12;
        /* Medium green */
        --color-4: #377b0e;
        /* Darker green */

        /* Improved detail colors - More contrast */
        --detail-1: #acff5a;
        /* Very light green for details */
        --detail-2: #8ff035;
        /* Light green */
        --detail-3: #78e428;
        /* Light green */

        /* New variables for effects */
        --shadow-color: rgba(0, 0, 0, 0.35);
        /* More pronounced shadow for better relief */
        --highlight-color: rgba(255, 255, 255, 0.5);
        /* More visible reflection */
        --texture-opacity: 1;
        /* More visible texture */
        --transition-speed: 0.35s;

        /* New variables for animations */
        --hover-scale: 1.12;
        --hover-brightness: 1.15;
        --animation-duration-slow: 4.8s;
        --animation-duration-medium: 2.4s;
        --animation-duration-fast: 0.4s;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

body {
        background: var(--bg-color);
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23707F5A' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16,2 C12,4 5,10 16,30 C27,10 20,4 16,2 Z' fill='%237ED321' stroke='%234A7C30' stroke-width='1'/%3E%3Cpath d='M16,2 C16,10 15,20 16,30' stroke='%234A7C30' stroke-width='0.7' stroke-dasharray='2,2' fill='none'/%3E%3Cpath d='M10,15 C12,15 20,15 22,15' stroke='%234A7C30' stroke-width='0.5' stroke-dasharray='1,2' fill='none'/%3E%3Cpath d='M11,20 C13,21 19,19 21,20' stroke='%234A7C30' stroke-width='0.5' stroke-dasharray='1,2' fill='none'/%3E%3C/svg%3E")
                        16 16,
                auto;
        font-family: "Poppins", sans-serif;
        margin: 0;
        padding: 30px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}

h1 {
        text-align: center;
        color: #4d5d37;
        margin-bottom: 40px;
        font-size: 2.5rem;
        font-weight: 600;
        text-shadow: 2px 2px 4px var(--shadow-color);
        letter-spacing: 1px;
}

#artboard {
        margin: 20px auto;
        width: calc(5 * (13 - 1) + 13 * (var(--gap) + var(--width)));
        height: calc(5 * (5 - 1) + 5 * (var(--gap) + var(--height)));
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cell {
        position: relative.........完整代码请登录后点击上方下载按钮下载查看