45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
/* 樱花飘落效果：动态生成花瓣，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)
|
|
}
|
|
})()
|