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;
	box-sizing: border-box;
	display: inline-block;
	width: var(--width);
	height: var(--height);
	margin: 0px 0px var(--gap) var(--gap);
	padding: 0px;
}

.cell div {
	position: absolute;
}

/* Elements of the cricket */
.antenna {
	top: 0;
	width: 2px;
	height: calc(0.4 * var(--width));
	background: var(--color-antenna);
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
	transition: transform var(--transition-speed);
	outline: 0.5px solid var(--outline-color);
}

.antenna.antenna-left {
	left: calc(0.4 * var(--width));
	transform: rotate(-15deg);
	transform-origin: bottom center;
}

.antenna.antenna-right {
	right: calc(0.4 * var(--width));
	transform: rotate(15deg);
	transform-origin: bottom center;
}

.antenna-tip {
	width: calc(0.08 * var(--width));
	height: calc(0.08 * var(--width));
	background: var(--color-antenna);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform var(--transition-speed);
	outline: 0.5px solid var(--outline-color);
}

.antenna-tip.antenna-tip-left {
	left: calc(0.4 * var(--width) - 0.04 * var(--width));
	top: calc(0.4 * var(--width) - 0.08 * var(--width));
}

.antenna-tip.antenna-tip-right {
	right: calc(0.4 * var(--width) - 0.04 * var(--width));
	top: calc(0.4 * var(--width) - 0.08 * var(--width));
}

.body {
	width: 100%;
	height: calc(var(--height) - 0.28 * var(--width));
	top: calc(0.28 * var(--width));
	background: var(--color-main);
	border-radius: 70% 70% 65% 65% / 80% 80% 60% 60%;
	box-shadow: inset 0 -8px 16px var(--shadow-color),
		0 6px 12px var(--shadow-color);
	background-image: radial-gradient(
			circle at 35% 25%,
			var(--highlight-color),
			transparent 65%
		),
		radial-gradient(circle at 65% 75%, var(--shadow-color), transparent 65%);
	background-size: 100% 100%, 100% 100%;
	background-position: 0 0, 0 0;
	background-blend-mode: overlay;
	opacity: var(--texture-opacity);
	transition: transform var(--transition-speed), filter var(--transition-speed);
	transform-origin: center bottom;
	outline: 1px solid var(--outline-color);
	background-blend-mode: normal, overlay, normal;
	z-index: 2;
}

.head {
	width: calc(0.72 * var(--width));
	height: calc(0.52 * var(--width));
	background: var(--color-main);
	border-radius: 50%;
	top: calc(0.14 * var(--height));
	left: calc(50% - 0.36 * var(--width));
	filter: brightness(1.15);
	position: relative;
	box-shadow: inset 0 3px 6px var(--highlight-color),
		0 3px 6px var(--shadow-color);
	transform-origin: center bottom;
	outline: 0.8px solid var(--outline-color);
	z-index: 3;
}

/* Add smile - plus expressif et mignon */
.head::after {
	content: "";
	position: absolute;
	width: 60%;
	height: 30%;
	border-bottom: 3px solid rgba(0, 0, 0, 0.6);
	border-radius: 0 0 120% 120%;
	bottom: 25%;
	left: 20%;
	transform: scaleX(1) rotate(0deg);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Add belly with stripes - plus dodu et mignon */
.body::after {
	content: "";
	position: absolute;
	width: 80%;
	height: 75%;
	background: var(--belly-color);
	border-radius: 50% 50% 45% 45% / 60% 60% 55% 55%;
	bottom: 10%;
	left: 10%;
	background-image: repeating-linear-gradient(
			0deg,
			transparent,
			transparent 6px,
			rgba(0, 0, 0, 0.1) 6px,
			rgba(0, 0, 0, 0.1) 12px
		),
		radial-gradient(
			circle at 50% 50%,
			rgba(255, 255, 255, 0.4) 0%,
			transparent 70%
		);
	box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.4);
	outline: 0.8px solid rgba(139, 108, 77, 0.4);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wing {
	width: calc(0.85 * var(--width));
	height: calc(0.65 * var(--height));
	background: var(--color-wing);
	top: calc(0.32 * var(--height));
	border-radius: 60% 60% 40% 40%;
	transform-origin: top center;
	box-shadow: inset 0 3px 6px var(--highlight-color),
		inset -2px -4px 8px var(--shadow-color), 0 3px 6px var(--shadow-color);
	background-image: linear-gradient(
			135deg,
			transparent 70%,
			var(--highlight-color) 100%
		),
		linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.1) 100%),
		radial-gradient(circle at 30% 30%, var(--highlight-color) 0%, transparent 60%);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
	opacity: 0.95;
	overflow: hidden;
	outline: 0.8px solid var(--outline-color);
	z-index: 1;
}

.wing.wing-left {
	left: calc(0.09 * var(--width));
	transform: rotate(6deg);
}

.wing.wing-right {
	right: calc(0.09 * var(--width));
	transform: rotate(-6deg) scaleX(-1);
}

.wing-pattern {
	width: calc(0.75 * var(--width));
	height: calc(0.55 * var(--height));
	border-top: 1.5px solid rgba(0, 0, 0, 0.12);
	border-left: 1.5px solid rgba(0, 0, 0, 0.12);
	top: calc(0.36 * var(--height));
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 8px,
		rgba(0, 0, 0, 0.06) 8px,
		rgba(0, 0, 0, 0.06) 16px
	);
}

.wing-pattern.wing-pattern-left {
	left: calc(0.13 * var(-.........完整代码请登录后点击上方下载按钮下载查看