这是一款基于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实现唯美表白动画代码