五彩纸屑

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// 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)
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg