/* 樱花飘落效果:动态生成花瓣,CSS 动画飘落+左右摇摆+旋转 */ (function () { if (document.getElementById('sakura-container')) return // 容器:铺满全屏、不拦截鼠标事件 var container = document.createElement('div') container.id = 'sakura-container' container.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;' + 'pointer-events:none;z-index:9999;overflow:hidden;' document.body.appendChild(container) // 样式与飘落关键帧(S 形摆动 + 旋转) var style = document.createElement('style') style.textContent = '.sakura-petal{' + ' position:absolute;top:-12%;' + ' background:#ffb7c5;border-radius:100% 0 100% 0;' + ' opacity:.85;will-change:transform;' + ' animation:sakura-fall linear infinite;' + '}' + '@keyframes sakura-fall{' + ' 0%{transform:translate(0,-12vh) rotate(0deg);}' + ' 25%{transform:translate(18px,25vh) rotate(90deg);}' + ' 50%{transform:translate(-18px,50vh) rotate(180deg);}' + ' 75%{transform:translate(18px,75vh) rotate(270deg);}' + ' 100%{transform:translate(0,112vh) rotate(360deg);}' + '}' document.head.appendChild(style) var PETALS = 28 for (var i = 0; i < PETALS; i++) { var p = document.createElement('div') p.className = 'sakura-petal' var size = 8 + Math.random() * 10 // 8~18px p.style.width = size + 'px' p.style.height = size + 'px' p.style.left = Math.random() * 100 + 'vw' p.style.background = Math.random() > 0.5 ? '#ffb7c5' : '#ffc8d6' p.style.animationDuration = (6 + Math.random() * 6).toFixed(2) + 's' // 6~12s p.style.animationDelay = (-Math.random() * 12).toFixed(2) + 's' // 错落起步 container.appendChild(p) } })()