让你的网站文字“抖”起来

让你的网站文字“抖”起来

这篇文章上次修改于 871 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

最近听说了一款挺火的软件，叫 “抖音”，发现它的标志有蓝红双色的叠加。我突然想到，我们的网站文字能否做出这个效果，甚至让文字像这个一样抖起来？答案当然是可以的。

只需要给对应的选择器添加 text-shadow 属性即可完成。例如我让 body 里面的所有文字抖起来，就这样写：

body{
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}

这种静态的效果我可不满足，想让它动起来，不需要任何 JavaScript，只需要 CSS3 动画即可完成。接下来我们就利用 CSS3 动画，让所有文字抖起来吧！

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

body{
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

本脚本于 2018.7.8 更新，可用于切换开启和关闭

function paul_shake(action, selector) {
    var status = false;

    action.addEventListener("click", function () {
        if(status === true){
            status = false;
            selector.style = "";
        }
        else{
            status = true;
            selector.style = "animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55)";
        }
    })
}

paul_shake(切换开启和关闭的按钮, document.body);

我在这篇文章已经写好了一个添加效果的 JavaScript 代码，点击下面的按钮即可体验！

前方高能！别把你的眼睛都给看蒙了 2333

音乐是《马克思佩恩：3》的加载音乐噢！转载请勿直接复制该链接！