css+js实现花朵生长动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css+js实现花朵生长动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
  
<style>
:root {
	--title: "Flowers & Fireflies";
	--author: "Matt Cannon";
	--contact: "mc@mattcannon.design";
	--description: "An immersive night garden scene featuring flowers that bloom on prime number cycles, implementing the Cicada Principle. Watch as flowers grow at different depths with natural swaying and fireflies hover with organic movement patterns under a starry sky.";
	--keywords: "cicada principle, prime numbers, interactive garden, flowers, fireflies, night scene, bloom cycles, animation, CSS, JavaScript, nature simulation, organic patterns, responsive design, cicada challenge, prime intervals";
	--last-modified: "2025-03-24";
	--content-language: "en";
	--generator: "HTML5, CSS3, JavaScript, animation effects, prime number patterns, depth simulation";
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #0a0e18;
	overflow: hidden;
	height: 100vh;
	font-family: "Poppins", sans-serif;
}

.garden-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: linear-gradient(
		to bottom,
		#030614 0%,
		#0a1128 25%,
		#172449 50%,
		#1f2e58 75%,
		#28334f 100%
	);
}

.night-sky {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	background: radial-gradient(
		circle at 50% 10%,
		rgba(64, 80, 130, 0.5),
		transparent 60%
	);
	z-index: 0;
}

.stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
	z-index: 0;
}

.star {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	opacity: 0;
	animation: twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
	animation-delay: var(--twinkle-delay, 0s);
}

.clouds {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60%;
	z-index: 0;
}

.cloud {
	position: absolute;
	background-color: rgba(30, 40, 60, 0.6);
	border-radius: 50%;
	filter: blur(20px);
	z-index: 0;
}

.garden {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.ground {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to bottom, #2d1d15, #211510);
	z-index: 1;
	overflow: hidden;
	border-radius: 50% 70% 0 0 / 40px;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
	transform-origin: bottom;
}

.ground::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.2'/%3E%3C/svg%3E");
	opacity: 0.5;
}

.flower {
	position: absolute;
	transform-origin: bottom center;
	z-index: 2;
	--scale: 1;
}

.stem {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3px;
	background: linear-gradient(to right, #2e5d20, #5cad4a, #2e5d20);
	border-radius: 2px;
	transform-origin: bottom center;
	height: 0;
	transition: height 1s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.stem::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 6px;
	background: radial-gradient(
		ellipse at center,
		rgba(40, 25, 15, 0.8) 0%,
		rgba(40, 25, 15, 0) 70%
	);
	border-radius: 50%;
	opacity: 0.8;
}

.stem.curved {
	border-radius: 50%;
}

@keyframes stemBend {
	0% {
		transform: perspective(500px) rotateX(0deg)
			rotateY(var(--bend-rotation-neg, -1deg)) rotateZ(0deg);
	}
	50% {
		transform: perspective(500px) rotateX(0deg)
			rotateY(var(--bend-rotation-pos, 1deg)) rotateZ(0deg);
	}
	100% {
		transform: perspective(500px) rotateX(0deg)
			rotateY(var(--bend-rotation-neg, -1deg)) rotateZ(0deg);
	}
}

.petal {
	position: absolute;
	transform-origin: center bottom;
	opacity: 0;
	transform: scale(0);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

.petal.type1 {
	border-radius: 50% 50% 50% 0;
}
.petal.type2 {
	border-radius: 80% 0 80% 0;
}
.petal.type3 {
	border-radius: 0 50% 50% 50%;
}
.petal.type4 {
	border-radius: 50% 20% 50% 20%;
}
.petal.type5 {
	border-radius: 0 100% 50% 50%;
}

.center {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0);
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf {
	position: absolute;
	transform-origin: 0 50%;
	opacity: 0;
	transform: scale(0);
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-shape {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: 0 50%;
	overflow: hidden;
}

.leaf-stem {
	position: absolute;
	height: 2px;
	top: 50%;
	left: -4px;
	transform: translateY(-50%);
	width: 4px;
}

.main-vein {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

.side-vein {
	position: absolute;
	width: 80%;
	height: 1px;
	transform-origin: left;
}

.firefly {
	position: absolute;
	width: 4px;
	height: 4px;
	background-color: #fff9c4;
	border-radius: 50%;
	filter: blur(2px);
	box-shadow: 0 0 10px #fff9c4, 0 0 20px rgba(255, 249, 196, 0.7);
	opacity: 0;
	z-index: 3;
	transition: opacity 0.5s ease;
}

@keyframes sway {
	0% {
		transform: scale(var(--scale)) rotate(-3deg);
	}
	50% {
		transform: scale(var(--scale)) rotate(3deg);
	}
	100% {
		transform: scale(var(--scale)) rotate(-3deg);
	}
}

.flower {
	position: absolute;
	transform-origin: bottom center;
	z-index: 2;
	--scale: 1;
}

@keyframes fireflyFloat {
	0% {
		transform: translate(0, 0);
	}
	10% {
		transform: translate(var(--x1, 3px), var(--y1, -2px));
	}
	20% {
		transform: translate(var(--x2, -2px), var(--y2, -4px));
	}
	30% {
		transform: translate(var(--x3, 4px), var(--y3, -1px));
	}
	40% {
		transform: translate(var(--x4, 1px), var(--y4, -3px));
	}
	50% {
		transform: translate(var(--x5, -3px), var(--y5, 0px));
	}
	60% {
		transform: translate(var(--x6, 2px), var(--y6, -2px));
	}
	70% {
		transform: translate(var(--x7, -1px), var(--y7, -4px));
	}
	80% {
		transform: translate(var(--x8, 3px), var(--y8, -1px));
	}
	90% {
		transform: translate(var(--x9, 0px), var(--y9, -3px));
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes twinkle {
	0%,
	100% {
		opacity: var(--min-opacity, 0.1);
	}
	50% {
		opacity: var(--max-opacity, 0.7);
	}
}

@keyframes cloudDrift {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(var(--drift-distance, 100vw));
	}
}

@keyframes leafSway {
	0%,
	100% {
		transform: rotate(var(--leaf-angle));
	}
	50% {
		transform: rotate(calc(var(--leaf-angle) + var(--leaf-sway, 5deg)));
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
</style>

  
</head>

<body translate="no">
  <div class="garden-container">
  <div class="night-sky"></div>
  <div class="stars"></div>
  <div class="clouds"></div>
  <div class="ground"></div>
  <div class="garden"></div>
  <div class="fireflies"></div>
</div>
  
      <script  >
document.addEventListener("DOMContentLoaded", function () {
  const primes = [3, 5, 7, 11, 13, 17];

  const flowerStyles = {
    3: {
      colors: ["#ff7eb9", "#ff5c9f"],
      size: 24,
      petals: 5,
      type: "type1",
      center: { color: "#ffea00", size: 8 } },

    5: {
      colors: ["#7afcff", "#00d8ff"],
      size: 22,
      petals: 6,
      type: "type2",
      center: { color: "#ffcc00", size: 7 } },

    7: {
      colors: ["#feff9c", "#ffd800"],
      size: 28,
      petals: 8,
      type: "type1",
      center: { color: "#ff9900", size: 9 } },

    11: {
      colors: ["#ff9a3c", "#ff6e00"],
      size: 26,
      petals: 5,
      type: "type3",
      center: { color: "#5e2f00", size: 8 } },

    13: {
      colors: ["#ff65a3", "#ff006e"],
      size: 20,
      petals: 7,
      type: "type4",
      center: { color: "#ff.........完整代码请登录后点击上方下载按钮下载查看