「振る」ページをしてみましょうか?!?

慎重に小さなパートナーは、私はハハ、ああとても幸せ、小さなボタンがある左下隅を振る、その後、皮膚にページをアップし始めたかもしれません

この効果を達成するために、使い捨てCSS3アニメーションをJSを使用しないでください。

CSSの設定

@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テキストのデザイン

<button id="btn1">皮一下</button>
    12131312

私は単純にテキストを書いて、何が書くことができます

JSデザイン

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);

概要

ページのビブラートのように、アップ揺れのような
コードを、それは実際にはとても満足しています

おすすめ

転載: www.cnblogs.com/sunhang32/p/12069857.html