程序员的情人节应该这么优雅度过(附源码)(2)

这是一款基于jQuery+CSS3实现的情人节悬挂摆动爱心动画特效源码。画面中心的心形图案呈现出时钟摆动的动画效果,同时图案中与背景上都会有小的心形动画浮动显示与隐藏的视觉效果。由于使用了部分CSS3技术,建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)浏览器预览本源码。

部分JS代码:

var shakes = {
    MAX_PARTICLES: 500,
    pool: [],
    start: function(t, e, s) {
        shakes.ropeH = t,
        shakes.container = e,
        shakes.timer = setInterval(function() {
            shakes.spawn(getRadian(s)),
            shakes.update()
        },
        50)
    },
    spawn: function(t) {
        if (! (shakes.pool.length >= shakes.MAX_PARTICLES)) {
            var e = Math.sin(t) * (shakes.ropeH + 40),
            s = Math.cos(t) * (shakes.ropeH + 40) + 20;
            heart = new TinyHeart(e, s, shakes.container),
            shakes.pool.push(heart)
        }
    },
    update: function() {
        var t, e;
        for (t = shakes.pool.length - 1; t >= 0; t--) e = shakes.pool[t],
        e.alive ? e.move() : (e.destory(), shakes.pool.splice(t, 1))
    },
    stop: function() {
        clearInterval(shakes.timer),
        shakes.pool.forEach(function(t) {
            t.destory()
        }),
        shakes.pool = []
    }
},
init = function() {
    var t = 180,
    e = document.querySelector("#valentine"),
    s = e.querySelector(".tiny"),
    a = e.querySelector(".shake"),
    i = function() {
        e.querySelector(".close").addEventListener("click",
        function() {
            shakes.stop(),
            e.style.display = "none"
        })
    };
    shakes.start(t, s, a),
    a.querySelector(".rope").style.height = t + "px",
    a.querySelector(".heart-wrap").style.top = t - 60 + "px",
    e.style.display = "block",
    i()
};
init();

效果图:

程序员的情人节��该这么优雅度过(附源码)

演示地址: 

4、jQuery+HTML5实现唯美表白动画代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/92790017e2ea3b7043b6e91351a68c00.html