<!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-x: hidden;
position: relative;
background: linear-gradient(135deg, rgba(240, 244, 248, 0.7) 0%, rgba(217, 230, 242, 0.7) 100%);
transition: background 1.5s ease;
}
/* 银杏叶背景容器 */
#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%;
}
/* 初始化圆形容器 */
#initialCircleContainer {
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
transition: all 0.5s ease;
}
/* 圆形叶子样式 */
.circle-leaf {
position: absolute;
transform-origin: center center;
opacity: 0;
animation: appearAndRotate 1.5s ease-out forwards;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}
/* 叶子出现并旋转动画 */
@keyframes appearAndRotate {
0% {
opacity: 0;
transform: scale(0.2) rotate(0deg);
}
60% {
opacity: 0.7;
}
100% {
opacity: 1;
transform: scale(1) rotate(360deg);
}
}
/* 散开发光效果 */
.circle-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1px;
height: 1px;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
opacity: 0;
animation: glowPulse 3s ease-in-out;
pointer-events: none;
z-index: 0;
}
@keyframes glowPulse {
0% {
opacity: 0;
width: 0;
height: 0;
}
20% {
opacity: 0.8;
}
70% {
opacity: 0.6;
width: 100vw;
height: 100vw;
}
100% {
opacity: 0;
width: 150vw;
height: 150vw;
}
}
/* 叶子散开动画 */
@keyframes disperseLeaf {
0% {
opacity: 1;
transform: translate(0, 0) rotate(0deg);
}
60% {
opacity: 0.8;
}
100% {
opacity: 0;
transform: translate(var(--disperse-x), var(--disperse-y)) rotate(var(--disperse-rotate));
}
}
/* 叶子样式 */
#leafContainer > div {
position: absolute;
pointer-events: none;
will-change: transform;
backface-visibility: hidden;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}
/* 近景层叶子 - 更大更清晰 */
#leafContainer > div.foreground {
width: 130px;
height: 90px;
opacity: 0.95;
z-index: -1;
filter: blur(0px);
}
/* 中景层叶子 - 标准大小 */
#leafContainer > div.midground {
width: 100px;
height: 70px;
opacity: 0.85;
z-index: -2;
filter: blur(1px);
}
/* 远景层叶子 - 更小更模糊 */
#leafContainer > div.background {
width: 80px;
height: 55px;
opacity: 0.7;
z-index: -3;
filter: blur(2px);
}
#leafContainer > div > svg {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
/* 叶子拖尾效果 */
.leaf-trail {
position: absolute;
pointer-events: none;
opacity: 0.3;
transform-origin: center center;
transition: opacity 0.3s;
filter: blur(1px);
animation: trail-fade 0.8s ease-out;
will-change: transform, opacity;
z-index: -4;
}
/* 拖尾淡出动画 */
@keyframes trail-fade {
0% { opacity: 0.4; filter: blur(0px); transform: scale(1.05); }
100% { opacity: 0.2; filter: blur(2px); transform: scale(0.95); }
}
/* 叶子淡出动画 */
@-webkit-keyframes fade {
0% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}
/* 叶子从上方下落动画 */
@-webkit-keyframes drop {
0% { -webkit-transform: translate(0px, -50px); }
100% { -webkit-transform: translate(0px, 110vh); }
}
/* 叶子从左侧飘入动画 */
@-webkit-keyframes dropFromLeft {
0% { -webkit-transform: translate(-50px, 0px); }
100% { -webkit-transform: translate(110vw, 80vh); }
}
/* 叶子从右侧飘入动画 */
@-webkit-keyframes dropFromRight {
0% { -webkit-transform: translate(50px, 0px); }
100% { -webkit-transform: translate(-110vw, 80vh); }
}
/* 叶子中间飘动动画 */
@-webkit-keyframes float {
0% { -webkit-transform: translate(0px, 0px); }
33% { -webkit-transform: translate(30px, 30px); }
66% { -webkit-transform: translate(-20px, 60px); }
100% { -webkit-transform: translate(10px, 110vh); }
}
/* 顺时针旋转 */
@-webkit-keyframes clockwiseSpin {
0% { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
}
/* 逆时针旋转并翻转 */
@-webkit-keyframes counterclockwiseSpinAndFlip {
0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}
</style>
</head>
<body>
<!-- 银杏叶背景 -->
<div id="ginkgo-background">
<div id="initialCircleContainer"></div>
<div class="circle-glow"></div>
<div id="leafContainer"></div>
</div>
<script>
// 银杏叶动画脚本
// 三个SVG字符串（纯矢量SVG）
const svgList = [
// 黄色银杏叶
`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 192"><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="#EEAF11" transform="translate(157.5625,11.8125)"/></svg>`,
// 白色银杏叶
`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 192"><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="#FFFFFF" transform="translate(157.5625,11.8125)"/></svg>`,
// 绿色银杏叶
`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 192"><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="#04F15B" transform="translate(157.5625,11.8125)"/></svg>`
];
// 定义叶子数量
const NUMBER_OF_LEAVES = 45;
// 存储每片叶子的历史位置
let leafPositions = {};
// 叶子容器
let leafContainer;
// 工具函数
function randomInteger(low, high) {
return low + Math.floor(Math.random() * (high - low));
}
function randomFloat(low, high) {
return low + Math.random() * (high - low);
}
// 初始化银杏叶背景
function initGinkgoBackground() {
leafContainer = document.getElementById('leafContainer');
// 清空容器
while (leafContainer.firstChild) {
leafContainer.removeChild(leafContainer.firstChild);
}
// 创建叶子
for (let i = 0; i < NUMBER_OF_LEAVES; i++) {
createLeafOutsideViewport(i);
}
}
// 创建视口外的叶子
function createLeafOutsideViewport(id) {
var leafDiv = document.createElement('div');
leafDiv.id = 'leaf-' + id;
// 分配深度层
const depthRandom = Math.random();
const depthLayer = depthRandom < 0.4 ? 0 : (depthRandom < 0.7 ? 1 : 2);
if (depthLayer === 0) {
leafDiv.className = 'foreground';
} else if (depthLayer === 1) {
leafDiv.className = 'midground';
} else {
leafDiv.className = 'background';
}
// 随机选择SVG叶子
const svgContent = svgList[Math.floor(Math.random() * svgList.length)];
// 决定入场方向
const entryDirection = Math.random();
if (entryDirection < 0.5) {
leafDiv.style.top = "-150px";
leafDiv.style.left = `${Math.random() * window.innerWidth}px`;
leafDiv.style.webkitAnimationName = 'fade, drop';
} else if (entryDirection < 0.75) {
leafDiv.style.top = `${Math.random() * window.innerHeight}px`;
leafDiv.style.left = "-150px";
leafDiv.style.webkitAnimationName = 'fade, dropFromLeft';
} else {
leafDiv.style.top = `${Math.random() * window.innerHeight}px`;
leafDiv.style.left = `${window.innerWidth + 150}px`;
leafDiv.style.webkitAnimationName = 'fade, dropFromRight';
}
// 设置动画时长
var durationMultiplier = leafDiv.className === 'foreground' ? 0.8 :
leafDiv.className === 'midground' ? 1.2 : 1.6;
var fadeAndDropDuration = `${randomFloat(8, 15) * durationMultiplier}s`;
leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
var leafDelay = `${randomFloat(0, 3)}s`;
leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
// 创建SVG元素
var svgElem = document.createElement('div');
svgElem.innerHTML = svgContent;
const svgNode = svgElem.firstChild;
svgNode.style.webkitAnimationName = Math.random() < 0.5 ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
svgNode.style.webkitAnimationDuration = `${randomFloat(4, 8)}s`;
leafDiv.appendChild(svgNode);
leafContainer.appendChild(leafDiv);
// 动画结束监听
leafDiv.addEventListener('animationend', function(e) {
if (e.animationName === 'fade') {
const newLeaf = createLeafOutsideViewport(id);
if (this.parentNode && newLeaf) {
this.parentNode.replaceChild(newLeaf, this);
}
}
});
return leafDiv;
}
// 创建初始圆形效果
function createInitialCircle() {
const circleContainer = document.getElementById('initialCircleContainer');
const radius = Math.min(window.innerWidth, window.innerHeight) * 0.25;
const numberOfLeaves = 24;
circleContainer.innerHTML = '';
// 外圈叶子
for (let i = 0; i < numberOfLeaves; i++) {
const angle = (i / numberOfLeaves) * Math.PI * 2;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
const leaf = document.createElement('div');
leaf.className = 'circle-leaf';
leaf.style.width = '100px';
leaf.style.height = '80px';
leaf.style.left = `${x}px`;
leaf.style.top = `${y}px`;
const delay = (i % (numberOfLeaves/3)) * 0.1;
leaf.style.animationDelay = `${delay}s`;
const svgIndex = i % svgList.length;
const svgElem = document.createElement('div');
svgElem.innerHTML = svgList[svgIndex];
leaf.appendChild(svgElem.firstChild);
circleContainer.appendChild(leaf);
}
// 内圈叶子
const innerRadius = radius * 0.6;
const innerLeaves = 12;
for (let i = 0; i < innerLeaves; i++) {
const angle = ((i / innerLeaves) * Math.PI * 2) + (Math.PI / innerLeaves);
const x = Math.cos(angle) * innerRadius;
const y = Math.sin(angle) * innerRadius;
const leaf = document.createElement('div');
leaf.className = 'circle-leaf';
leaf.style.width = '85px';
leaf.style.height = '65px';
leaf.style.left = `${x}px`;
leaf.style.top = `${y}px`;
const delay = 0.3 + (i % (innerLeaves/2)) * 0.15;
leaf.style.animationDelay = `${delay}s`;
const svgIndex = (i + 1) % svgList.length;
const svgElem = document.createElement('div');
svgElem.innerHTML = svgList[svgIndex];
leaf.appendChild(svgElem.firstChild);
circleContainer.appendChild(leaf);
}
// 触发发光效果
const glowElement = document.querySelector('.circle-glow');
if (glowElement) {
glowElement.style.animation = 'none';
glowElement.offsetHeight;
glowElement.style.animation = 'glowPulse 3s ease-in-out';
}
}
// 散开初始圆形
function disperseInitialCircle() {
const circleContainer = document.getElementById('initialCircleContainer');
const leaves = circleContainer.querySelectorAll('.circle-leaf');
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const angleSegment = (Math.PI * 2) / leaves.length;
leaves.forEach((leaf, index) => {
const baseAngle = index * angleSegment;
const angleVariation = angleSegment * 0.6;
const angle = baseAngle + (Math.random() * angleVariation - angleVariation/2);
const minDistance = Math.max(viewportWidth, viewportHeight) * 1.2;
const distance = minDistance + Math.random() * 200;
const disperseX = Math.cos(angle) * distance;
const disperseY = Math.sin(angle) * distance;
const disperseRotate = Math.random() * 360 - 180;
leaf.style.setProperty('--disperse-x', `${disperseX}px`);
leaf.style.setProperty('--disperse-y', `${disperseY}px`);
leaf.style.setProperty('--disperse-rotate', `${disperseRotate}deg`);
leaf.style.animation = `disperseLeaf 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards`;
leaf.style.animationDelay = `${index * 0.02}s`;
leaf.addEventListener('animationend', function(e) {
if (e.animationName === 'disperseLeaf' && leaf.parentNode) {
leaf.parentNode.removeChild(leaf);
}
});
});
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
createInitialCircle();
setTimeout(function() {
disperseInitialCircle();
setTimeout(function() {
initGinkgoBackground();
}, 800);
}, 4000);
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html