<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>连续飘落银杏叶背景</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
min-height: 100vh;
overflow: hidden;
position: relative;
background: linear-gradient(135deg,
rgba(15, 23, 42, 0.95) 0%,
rgba(30, 41, 59, 0.9) 30%,
rgba(51, 65, 85, 0.85) 70%,
rgba(15, 23, 42, 0.95) 100%);
transition: all 2s ease;
}
/* 淡雅魔法阵 */
body::before {
content: '';
position: fixed;
top: 50%;
left: 50%;
width: 60vmin;
height: 60vmin;
transform: translate(-50%, -50%);
background:
radial-gradient(circle, transparent 48%, rgba(148, 163, 184, 0.03) 49%, rgba(148, 163, 184, 0.03) 50%, transparent 51%),
radial-gradient(circle, transparent 65%, rgba(248, 250, 252, 0.02) 66%, rgba(248, 250, 252, 0.02) 67%, transparent 68%);
border-radius: 50%;
animation: gentleRotate 120s linear infinite;
z-index: -10;
pointer-events: none;
opacity: 0.4;
}
@keyframes gentleRotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 银杏叶背景容器 */
#ginkgo-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
#leafContainer {
position: absolute;
width: 100%;
height: 100%;
}
#particleContainer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
/* 简约能量粒子 */
.energy-particle {
position: absolute;
width: 2px;
height: 2px;
background: rgba(248, 250, 252, 0.6);
border-radius: 50%;
pointer-events: none;
animation: floatUp 15s linear infinite;
box-shadow: 0 0 4px rgba(248, 250, 252, 0.3);
}
@keyframes floatUp {
0% {
transform: translateY(100vh) scale(0);
opacity: 0;
}
10% {
opacity: 1;
transform: scale(1);
}
90% {
opacity: 0.8;
}
100% {
transform: translateY(-50px) scale(0);
opacity: 0;
}
}
/* 叶子容器样式 */
#leafContainer > div {
position: absolute;
pointer-events: none;
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
}
/* 近景叶子 */
#leafContainer > div.foreground {
width: 120px;
height: 85px;
opacity: 0.9;
z-index: -1;
filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.3));
}
/* 中景叶子 */
#leafContainer > div.midground {
width: 95px;
height: 68px;
opacity: 0.75;
z-index: -2;
filter: blur(0.5px) drop-shadow(0 0 2px rgba(251, 191, 36, 0.2));
}
/* 远景叶子 */
#leafContainer > div.background {
width: 75px;
height: 52px;
opacity: 0.6;
z-index: -3;
filter: blur(1px) drop-shadow(0 0 1px rgba(251, 191, 36, 0.1));
}
#leafContainer > div > svg {
position: absolute;
width: 100%;
height: 100%;
transform: translateZ(0);
}
/* 动画定义 */
@-webkit-keyframes fade {
0%, 95% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes drop {
0% { transform: translate3d(0px, -50px, 0); }
100% { transform: translate3d(0px, calc(100vh + 50px), 0); }
}
@-webkit-keyframes dropFromLeft {
0% { transform: translate3d(-50px, 0px, 0); }
100% { transform: translate3d(calc(100vw + 50px), 70vh, 0); }
}
@-webkit-keyframes dropFromRight {
0% { transform: translate3d(50px, 0px, 0); }
100% { transform: translate3d(calc(-100vw - 50px), 70vh, 0); }
}
@-webkit-keyframes gentleSpin {
0% { transform: rotate(-30deg); }
100% { transform: rotate(30deg); }
}
@-webkit-keyframes gentleFlip {
0% { transform: scale(-1, 1) rotate(30deg); }
100% { transform: scale(-1, 1) rotate(-30deg); }
}
/* 响应式 */
@media (max-width: 768px) {
#leafContainer > div.foreground { width: 90px; height: 64px; }
#leafContainer > div.midground { width: 72px; height: 51px; }
#leafContainer > div.background { width: 56px; height: 40px; }
}
</style>
</head>
<body>
<!-- 银杏叶背景 -->
<div id="ginkgo-background">
<div id="leafContainer"></div>
<div id="particleContainer"></div>
</div>
<script>
// 配置
const CONFIG = {
numberOfLeaves: window.innerWidth < 768 ? 50 : 80,
particlesEnabled: true,
maxLeaves: 150,
leafCreationInterval: 400, // 更频繁的叶子生成
particleCreationInterval: 1500,
burstCreationInterval: 2000, // 定期批量生成
burstSize: 3 // 每次批量生成数量
};
// 简化的银杏叶SVG (金色系为主)
const svgList = [
// 深金色
`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 192"><defs><linearGradient id="deepGold" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#D97706"/><stop offset="100%" stop-color="#92400E"/></linearGradient></defs><path d="M0 0 C0.71655762 0.00080566 1.43311523 0.00161133 2.17138672 0.00244141 C9.04271315 0.08135103 15.33382345 0.95774137 21.75 3.5 C24.46475105 4.52554547 24.46475105 4.52554547 26.75 2.875 C28.0803125 2.0396875 28.0803125 2.0396875 29.4375 1.1875 C34.84071519 -0.07687211 38.32231134 0.05490651 43.4375 2.1875 C46.77422627 2.92271087 50.11989879 3.57340183 53.4765625 4.2109375 C56.82035372 5.31377101 57.71620259 6.18523708 59.4375 9.1875 C61.14243358 12.68710051 61.95272452 15.309466 61.4375 19.1875 C59.83839309 21.4362441 58.24408095 23.43402921 56.4375 25.5 C42.3444405 42.55391995 34.92664135 64.09322291 36.4375 86.1875 C37.51125483 92.54548137 39.62431951 95.83400528 44.4375 100.1875 C60.73073895 111.43302963 80.84159387 116.36768589 100.5 116.5 C101.51694946 116.50833862 101.51694946 116.50833862 102.55444336 116.5168457 C107.48146099 116.44579171 111.71573541 115.4516338 116.4375 114.1875 C119.4375 114.0625 119.4375 114.0625 121.4375 114.1875 C121.6875 116.5 121.6875 116.5 121.4375 119.1875 C118.7865681 122.28025389 115.75707426 122.71503743 111.8046875 123.0625 C89.17287251 124.25757934 69.04384065 119.74812323 48.61401367 110.20019531 C46.2789459 109.11372744 43.93773343 108.04285958 41.58984375 106.984375 C40.86788818 106.65791992 40.14593262 106.33146484 39.40209961 105.99511719 C29.68555809 102.00079392 18.01558254 104.22447761 8.56054688 107.92138672 C-2.81770785 112.80894324 -12.64493115 119.87211729 -22.5625 127.1875 C-37.71778222 138.22365424 -37.71778222 138.22365424 -46.21875 137.91796875 C-51.47492806 136.27979325 -54.66317428 131.63960268 -57.5625 127.1875 C-58.57435099 124.61664898 -59.26546587 122.14238839 -59.8828125 119.453125 C-60.95385744 115.88297519 -63.01991257 113.86390783 -65.5625 111.1875 C-66.74046194 108.83157612 -66.76874468 107.12374337 -66.9375 104.5 C-67.23978614 100.91867771 -67.65150802 99.00289076 -69.25 95.6875 C-71.08129439 90.80404829 -70.03047438 87.08373161 -68.5625 82.1875 C-68.0675 81.1975 -68.0675 81.1975 -67.5625 80.1875 C-67.53657276 76.91696345 -67.58948722 73.66116017 -67.68945312 70.39257812 C-67.80114127 63.3562247 -66.41741452 56.77988178 -62.08203125 51.10546875 C-57.71689685 47.78255248 -52.45352185 46.61479233 -47.19165039 45.26538086 C-46.37043701 45.04889893 -45.54922363 44.83241699 -44.703125 44.609375 C-43.95579102 44.42987305 -43.20845703 44.25037109 -42.43847656 44.06542969 C-40.42511509 43.32015497 -40.42511509 43.32015497 -39.34814453 41.37402344 C-38.54342016 39.134399 -38.13421704 37.14194827 -37.8515625 34.78125 C-37.74070313 33.95496094 -37.62984375 33.12867188 -37.515625 32.27734375 C-37.29699626 30.5517383 -37.08604618 28.82514251 -36.8828125 27.09765625 C-36.01391826 20.76855161 -36.01391826 20.76855161 -33.64453125 17.71875 C-31.00864993 15.78016561 -28.30196124 13.97653591 -25.5625 12.1875 C-24.7375 11.5275 -23.9125 10.8675 -23.0625 10.1875 C-20.33319456 8.00405565 -17.47919728 6.11127906 -14.5625 4.1875 C-13.840625 3.630625 -13.11875 3.07375 -12.375 2.5 C-8.545708 -0.27293559 -4.52349412 -0.00521741 0 0 Z" fill="url(#deepGold)" transform="translate(157.5625,11.8125)"/></svg>`,
// 浅金色
`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 192"><defs><linearGradient id="lightGold" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FCD34D"/><stop offset="100%" stop-color="#F59E0B"/></linearGradient></defs><path d="M0 0 C0.71655762 0.00080566 1.43311523 0.00161133 2.17138672 0.00244141 C9.04271315 0.08135103 15.33382345 0.95774137 21.75 3.5 C24.46475105 4.52554547 24.46475105 4.52554547 26.75 2.875 C28.0803125 2.0396875 28.0803125 2.0396875 29.4375 1.1875 C34.84071519 -0.07687211 38.32231134 0.05490651 43.4375 2.1875 C46.77422627 2.92271087 50.11989879 3.57340183 53.4765625 4.2109375 C56.82035372 5.31377101 57.71620259 6.18523708 59.4375 9.1875 C61.14243358 12.68710051 61.95272452 15.309466 61.4375 19.1875 C59.83839309 21.4362441 58.24408095 23.43402921 56.4375 25.5 C42.3444405 42.55391995 34.92664135 64.09322291 36.4375 86.1875 C37.51125483 92.54548137 39.62431951 95.83400528 44.4375 100.1875 C60.73073895 111.43302963 80.84159387 116.36768589 100.5 116.5 C101.51694946 116.50833862 101.51694946 116.50833862 102.55444336 116.5168457 C107.48146099 116.44579171 111.71573541 115.4516338 116.4375 114.1875 C119.4375 114.0625 119.4375 114.0625 121.4375 114.1875 C121.6875 116.5 121.6875 116.5 121.4375 119.1875 C118.7865681 122.28025389 115.75707426 122.71503743 111.8046875 123.0625 C89.17287251 124.25757934 69.04384065 119.74812323 48.61401367 110.20019531 C46.2789459 109.11372744 43.93773343 108.04285958 41.58984375 106.984375 C40.86788818 106.65791992 40.14593262 106.33146484 39.40209961 105.99511719 C29.68555809 102.00079392 18.01558254 104.22447761 8.56054688 107.92138672 C-2.81770785 112.80894324 -12.64493115 119.87211729 -22.5625 127.1875 C-37.71778222 138.22365424 -37.71778222 138.22365424 -46.21875 137.91796875 C-51.47492806 136.27979325 -54.66317428 131.63960268 -57.5625 127.1875 C-58.57435099 124.61664898 -59.26546587 122.14238839 -59.8828125 119.453125 C-60.95385744 115.88297519 -63.01991257 113.86390783 -65.5625 111.1875 C-66.74046194 108.83157612 -66.76874468 107.12374337 -66.9375 104.5 C-67.23978614 100.91867771 -67.65150802 99.00289076 -69.25 95.6875 C-71.08129439 90.80404829 -70.03047438 87.08373161 -68.5625 82.1875 C-68.0675 81.1975 -68.0675 81.1975 -67.5625 80.1875 C-67.53657276 76.91696345 -67.58948722 73.66116017 -67.68945312 70.39257812 C-67.80114127 63.3562247 -66.41741452 56.77988178 -62.08203125 51.10546875 C-57.71689685 47.78255248 -52.45352185 46.61479233 -47.19165039 45.26538086 C-46.37043701 45.04889893 -45.54922363 44.83241699 -44.703125 44.609375 C-43.95579102 44.42987305 -43.20845703 44.25037109 -42.43847656 44.06542969 C-40.42511509 43.32015497 -40.42511509 43.32015497 -39.34814453 41.37402344 C-38.54342016 39.134399 -38.13421704 37.14194827 -37.8515625 34.78125 C-37.74070313 33.95496094 -37.62984375 33.12867188 -37.515625 32.27734375 C-37.29699626 30.5517383 -37.08604618 28.82514251 -36.8828125 27.09765625 C-36.01391826 20.76855161 -36.01391826 20.76855161 -33.64453125 17.71875 C-31.00864993 15.78016561 -28.30196124 13.97653591 -25.5625 12.1875 C-24.7375 11.5275 -23.9125 10.8675 -23.0625 10.1875 C-20.33319456 8.00405565 -17.47919728 6.11127906 -14.5625 4.1875 C-13.840625 3.630625 -13.11875 3.07375 -12.375 2.5 C-8.545708 -0.27293559 -4.52349412 -0.00521741 0 0 Z" fill="url(#lightGold)" transform="translate(157.5625,11.8125)"/></svg>`,
// 淡雅银灰
`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 192"><defs><linearGradient id="elegantSilver" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#E2E8F0"/><stop offset="100%" stop-color="#94A3B8"/></linearGradient></defs><path d="M0 0 C0.71655762 0.00080566 1.43311523 0.00161133 2.17138672 0.00244141 C9.04271315 0.08135103 15.33382345 0.95774137 21.75 3.5 C24.46475105 4.52554547 24.46475105 4.52554547 26.75 2.875 C28.0803125 2.0396875 28.0803125 2.0396875 29.4375 1.1875 C34.84071519 -0.07687211 38.32231134 0.05490651 43.4375 2.1875 C46.77422627 2.92271087 50.11989879 3.57340183 53.4765625 4.2109375 C56.82035372 5.31377101 57.71620259 6.18523708 59.4375 9.1875 C61.14243358 12.68710051 61.95272452 15.309466 61.4375 19.1875 C59.83839309 21.4362441 58.24408095 23.43402921 56.4375 25.5 C42.3444405 42.55391995 34.92664135 64.09322291 36.4375 86.1875 C37.51125483 92.54548137 39.62431951 95.83400528 44.4375 100.1875 C60.73073895 111.43302963 80.84159387 116.36768589 100.5 116.5 C101.51694946 116.50833862 101.51694946 116.50833862 102.55444336 116.5168457 C107.48146099 116.44579171 111.71573541 115.4516338 116.4375 114.1875 C119.4375 114.0625 119.4375 114.0625 121.4375 114.1875 C121.6875 116.5 121.6875 116.5 121.4375 119.1875 C118.7865681 122.28025389 115.75707426 122.71503743 111.8046875 123.0625 C89.17287251 124.25757934 69.04384065 119.74812323 48.61401367 110.20019531 C46.2789459 109.11372744 43.93773343 108.04285958 41.58984375 106.984375 C40.86788818 106.65791992 40.14593262 106.33146484 39.40209961 105.99511719 C29.68555809 102.00079392 18.01558254 104.22447761 8.56054688 107.92138672 C-2.81770785 112.80894324 -12.64493115 119.87211729 -22.5625 127.1875 C-37.71778222 138.22365424 -37.71778222 138.22365424 -46.21875 137.91796875 C-51.47492806 136.27979325 -54.66317428 131.63960268 -57.5625 127.1875 C-58.57435099 124.61664898 -59.26546587 122.14238839 -59.8828125 119.453125 C-60.95385744 115.88297519 -63.01991257 113.86390783 -65.5625 111.1875 C-66.74046194 108.83157612 -66.76874468 107.12374337 -66.9375 104.5 C-67.23978614 100.91867771 -67.65150802 99.00289076 -69.25 95.6875 C-71.08129439 90.80404829 -70.03047438 87.08373161 -68.5625 82.1875 C-68.0675 81.1975 -68.0675 81.1975 -67.5625 80.1875 C-67.53657276 76.91696345 -67.58948722 73.66116017 -67.68945312 70.39257812 C-67.80114127 63.3562247 -66.41741452 56.77988178 -62.08203125 51.10546875 C-57.71689685 47.78255248 -52.45352185 46.61479233 -47.19165039 45.26538086 C-46.37043701 45.04889893 -45.54922363 44.83241699 -44.703125 44.609375 C-43.95579102 44.42987305 -43.20845703 44.25037109 -42.43847656 44.06542969 C-40.42511509 43.32015497 -40.42511509 43.32015497 -39.34814453 41.37402344 C-38.54342016 39.134399 -38.13421704 37.14194827 -37.8515625 34.78125 C-37.74070313 33.95496094 -37.62984375 33.12867188 -37.515625 32.27734375 C-37.29699626 30.5517383 -37.08604618 28.82514251 -36.8828125 27.09765625 C-36.01391826 20.76855161 -36.01391826 20.76855161 -33.64453125 17.71875 C-31.00864993 15.78016561 -28.30196124 13.97653591 -25.5625 12.1875 C-24.7375 11.5275 -23.9125 10.8675 -23.0625 10.1875 C-20.33319456 8.00405565 -17.47919728 6.11127906 -14.5625 4.1875 C-13.840625 3.630625 -13.11875 3.07375 -12.375 2.5 C-8.545708 -0.27293559 -4.52349412 -0.00521741 0 0 Z" fill="url(#elegantSilver)" transform="translate(157.5625,11.8125)"/></svg>`,
// 暖橙色
`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 192"><defs><linearGradient id="warmOrange" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FB923C"/><stop offset="100%" stop-color="#EA580C"/></linearGradient></defs><path d="M0 0 C0.71655762 0.00080566 1.43311523 0.00161133 2.17138672 0.00244141 C9.04271315 0.08135103 15.33382345 0.95774137 21.75 3.5 C24.46475105 4.52554547 24.46475105 4.52554547 26.75 2.875 C28.0803125 2.0396875 28.0803125 2.0396875 29.4375 1.1875 C34.84071519 -0.07687211 38.32231134 0.05490651 43.4375 2.1875 C46.77422627 2.92271087 50.11989879 3.57340183 53.4765625 4.2109375 C56.82035372 5.31377101 57.71620259 6.18523708 59.4375 9.1875 C61.14243358 12.68710051 61.95272452 15.309466 61.4375 19.1875 C59.83839309 21.4362441 58.24408095 23.43402921 56.4375 25.5 C42.3444405 42.55391995 34.92664135 64.09322291 36.4375 86.1875 C37.51125483 92.54548137 39.62431951 95.83400528 44.4375 100.1875 C60.73073895 111.43302963 80.84159387 116.36768589 100.5 116.5 C101.51694946 116.50833862 101.51694946 116.50833862 102.55444336 116.5168457 C107.48146099 116.44579171 111.71573541 115.4516338 116.4375 114.1875 C119.4375 114.0625 119.4375 114.0625 121.4375 114.1875 C121.6875 116.5 121.6875 116.5 121.4375 119.1875 C118.7865681 122.28025389 115.75707426 122.71503743 111.8046875 123.0625 C89.17287251 124.25757934 69.04384065 119.74812323 48.61401367 110.20019531 C46.2789459 109.11372744 43.93773343 108.04285958 41.58984375 106.984375 C40.86788818 106.65791992 40.14593262 106.33146484 39.40209961 105.99511719 C29.68555809 102.00079392 18.01558254 104.22447761 8.56054688 107.92138672 C-2.81770785 112.80894324 -12.64493115 119.87211729 -22.5625 127.1875 C-37.71778222 138.22365424 -37.71778222 138.22365424 -46.21875 137.91796875 C-51.47492806 136.27979325 -54.66317428 131.63960268 -57.5625 127.1875 C-58.57435099 124.61664898 -59.26546587 122.14238839 -59.8828125 119.453125 C-60.95385744 115.88297519 -63.01991257 113.86390783 -65.5625 111.1875 C-66.74046194 108.83157612 -66.76874468 107.12374337 -66.9375 104.5 C-67.23978614 100.91867771 -67.65150802 99.00289076 -69.25 95.6875 C-71.08129439 90.80404829 -70.03047438 87.08373161 -68.5625 82.1875 C-68.0675 81.1975 -68.0675 81.1975 -67.5625 80.1875 C-67.53657276 76.91696345 -67.58948722 73.66116017 -67.68945312 70.39257812 C-67.80114127 63.3562247 -66.41741452 56.77988178 -62.08203125 51.10546875 C-57.71689685 47.78255248 -52.45352185 46.61479233 -47.19165039 45.26538086 C-46.37043701 45.04889893 -45.54922363 44.83241699 -44.703125 44.609375 C-43.95579102 44.42987305 -43.20845703 44.25037109 -42.43847656 44.06542969 C-40.42511509 43.32015497 -40.42511509 43.32015497 -39.34814453 41.37402344 C-38.54342016 39.134399 -38.13421704 37.14194827 -37.8515625 34.78125 C-37.74070313 33.95496094 -37.62984375 33.12867188 -37.515625 32.27734375 C-37.29699626 30.5517383 -37.08604618 28.82514251 -36.8828125 27.09765625 C-36.01391826 20.76855161 -36.01391826 20.76855161 -33.64453125 17.71875 C-31.00864993 15.78016561 -28.30196124 13.97653591 -25.5625 12.1875 C-24.7375 11.5275 -23.9125 10.8675 -23.0625 10.1875 C-20.33319456 8.00405565 -17.47919728 6.11127906 -14.5625 4.1875 C-13.840625 3.630625 -13.11875 3.07375 -12.375 2.5 C-8.545708 -0.27293559 -4.52349412 -0.00521741 0 0 Z" fill="url(#warmOrange)" transform="translate(157.5625,11.8125)"/></svg>`
];
let leafContainer, particleContainer;
let activeLeaves = 0;
let leafIdCounter = 0;
function randomFloat(low, high) {
return low + Math.random() * (high - low);
}
// 创建叶子
function createLeaf() {
if (activeLeaves >= CONFIG.maxLeaves) return null;
const leafDiv = document.createElement('div');
leafDiv.id = 'leaf-' + (leafIdCounter++);
// 简化深度分层
const depth = Math.random();
leafDiv.className = depth < 0.4 ? 'foreground' :
depth < 0.7 ? 'midground' : 'background';
// 多样化的入场方向，增加密度
const entry = Math.random();
if (entry < 0.7) {
// 从顶部落下 - 增加概率确保更多垂直飘落
leafDiv.style.top = "-150px";
leafDiv.style.left = `${Math.random() * (window.innerWidth + 200) - 100}px`;
leafDiv.style.webkitAnimationName = 'fade, drop';
} else if (entry < 0.85) {
// 从左侧飘入
leafDiv.style.top = `${Math.random() * window.innerHeight * 0.8}px`;
leafDiv.style.left = "-150px";
leafDiv.style.webkitAnimationName = 'fade, dropFromLeft';
} else {
// 从右侧飘入
leafDiv.style.top = `${Math.random() * window.innerHeight * 0.8}px`;
leafDiv.style.left = `${window.innerWidth + 150}px`;
leafDiv.style.webkitAnimationName = 'fade, dropFromRight';
}
const duration = randomFloat(10, 18); // 稍微快一点
leafDiv.style.webkitAnimationDuration = `${duration}s, ${duration}s`;
leafDiv.style.webkitAnimationDelay = `${randomFloat(0, 1)}s, ${randomFloat(0, 1)}s`; // 减少延迟
// 选择叶子颜色
const svg = document.createElement('div');
svg.innerHTML = svgList[Math.floor(Math.random() * svgList.length)];
const svgNode = svg.firstChild;
svgNode.style.webkitAnimationName = Math.random() < 0.5 ? 'gentleSpin' : 'gentleFlip';
svgNode.style.webkitAnimationDuration = `${randomFloat(4, 8)}s`;
svgNode.style.webkitAnimationIterationCount = 'infinite';
svgNode.style.webkitAnimationDirection = 'alternate';
svgNode.style.webkitAnimationTimingFunction = 'ease-in-out';
leafDiv.appendChild(svgNode);
leafContainer.appendChild(leafDiv);
activeLeaves++;
leafDiv.addEventListener('animationend', function(e) {
if (e.animationName === 'fade') {
activeLeaves--;
if (this.parentNode) {
this.parentNode.removeChild(this);
}
}
});
return leafDiv;
}
// 简约粒子
function createParticle() {
if (!CONFIG.particlesEnabled) return;
const particle = document.createElement('div');
particle.className = 'energy-particle';
particle.style.left = `${Math.random() * window.innerWidth}px`;
particle.style.animationDuration = `${randomFloat(12, 20)}s`;
particle.style.animationDelay = `${randomFloat(0, 3)}s`;
particleContainer.appendChild(particle);
setTimeout(() => {
if (particle.parentNode) {
particle.parentNode.removeChild(particle);
}
}, 25000);
}
function init() {
leafContainer = document.getElementById('leafContainer');
particleContainer = document.getElementById('particleContainer');
// 初始创建一些叶子，时间间隔更短
for (let i = 0; i < CONFIG.numberOfLeaves; i++) {
setTimeout(() => createLeaf(), i * 50);
}
// 持续创建叶子，实现连续飘落效果
setInterval(() => {
if (activeLeaves < CONFIG.maxLeaves) {
createLeaf();
}
}, CONFIG.leafCreationInterval);
// 定期批量生成叶子，避免大面积空白
setInterval(() => {
for (let i = 0; i < CONFIG.burstSize; i++) {
if (activeLeaves < CONFIG.maxLeaves) {
setTimeout(() => createLeaf(), i * 200);
}
}
}, CONFIG.burstCreationInterval);
// 启动粒子
setInterval(() => {
if (CONFIG.particlesEnabled && Math.random() < 0.5) {
createParticle();
}
}, CONFIG.particleCreationInterval);
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
init();
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html