特效描述:html5飘落 碎纸屑动画特效。飘落纸屑动画
代码结构
1. 引入JS
2. HTML代码
// Create confetti
window.addEventListener('load', function() {
var wrapper = document.createElement('section')
wrapper.id = 'confetti'
document.body.appendChild(wrapper)
for (var i = 60; i--;) {
var tag = document.createElement('div')
tag.setAttribute('data-top', Math.ceil(Math.random() * wrapper.offsetHeight * 2) - wrapper.offsetHeight)
tag.setAttribute('data-left', Math.ceil(Math.random() * wrapper.offsetWidth * 2) - wrapper.offsetWidth)
tag.setAttribute('data-bg', Math.ceil(Math.random() * 360))
tag.setAttribute('data-distance', Math.ceil(Math.random() * 100))
tag.setAttribute('data-x', Math.ceil(Math.random() * 360))
tag.setAttribute('data-y', Math.ceil(Math.random() * 360))
tag.setAttribute('data-z', Math.ceil(Math.random() * 360))
wrapper.appendChild(tag)
}
requestAnimationFrame(loop)
})
function loop() {
var tag = document.querySelectorAll('#confetti div')
for (var i = 0; i < tag.length; i++) {
var top = parseFloat(tag[i].getAttribute('data-top'))
var left = parseFloat(tag[i].getAttribute('data-left'))
var distance = parseFloat(tag[i].getAttribute('data-distance'))
var x = parseFloat(tag[i].getAttribute('data-x'))
var y = parseFloat(tag[i].getAttribute('data-y'))
var z = parseFloat(tag[i].getAttribute('data-z'))
tag[i].setAttribute('data-top', top + 1)
tag[i].setAttribute('data-left', left + 1)
tag[i].setAttribute('data-x', x + 2)
tag[i].setAttribute('data-y', y + 2)
tag[i].setAttribute('data-z', z + 2)
}
EQCSS.apply()
requestAnimationFrame(loop)
}