Careful small partners might find me shake up the lower left corner there is a small button, and then began to skin the page up, so happy ah ha ha
Do not use js, single use css3 animation to achieve this effect
css settings
@keyframes shake-it{
0%{
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25%{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50%{
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100%{
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}
html text design
<button id="btn1">皮一下</button>
12131312
There can write anything, I simply wrote out the text
JS Design
function paul_shake(action, selector) {
var status = false;
action.addEventListener("click", function () {
if(status === true){
status = false;
action.innerHTML = "抖起来"
selector.style = "overflow: auto;";
}
else{
status = true;
action.innerHTML = "停止抖"
selector.style = "overflow: auto;animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55)";
}
})
}
paul_shake(document.getElementById("btn1"), document.body);
to sum up
Like our page vibrato, like shaking up
the code it is actually so happy