js:
function hov(obj,url){
obj.on("click",function (){
$(this).find("a").addClass("hov");
setTimeout(function (){
window.location.href=url;
obj.find("a").removeClass("hov")
},500)
})
}
//Click the poem appreciation button
hov($(".btn"),"list.html");
//Click the category of poems
//love
hov($(".aq"),"love.html");
//lyrical
hov($(".sq"),"shuqing.html");
//philosophy
hov($(".zl"),"poem.html");
// boudoir
hov($(".gy"),"guiyuan.html");
// graceful
hov($(".wy"),"wanyue.html");
//miss
hov($(".sn"),"sinian.html");
// custody
hov($(".jl"),"jilv.html");
css animation settings:
.btn .hov {
-webkit-animation: gelatine 0.5s 1;
animation:gelatine 0.5s 1;
}
@keyframes gelatine{
from,to{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}