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

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

代码语言：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-..........完整代码请登录后点击上方下载按钮下载查看