让你的网站文字“抖”起来
03/06/25
0 评论
最近听说了一款挺火的软件，叫 “抖音”，发现它的标志有蓝红双色的叠加。我突然想到，我们的网站文字能否做出这个效果，甚至让文字像这个一样抖起来？答案当然是可以的。
试玩一下
前方高能！别把你的眼睛都给看蒙了 2333
静态效果
只需要给对应的选择器添加 text-shadow 属性即可完成。例如我让 body 里面的所有文字抖起来，就这样写：body{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}动态效果
这种静态的效果我可不满足，想让它动起来，不需要任何 JavaScript，只需要 CSS3 动画即可完成。接下来我们就利用 CSS3 动画，让所有文字抖起来吧！代码
<style>
body{
/* 默认不应用动画 */
animation: none;
}
@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);
}
}
</style>
<script>
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)";
}
})
}
// 获取实际的按钮元素并绑定事件
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('shake-it');
paul_shake(button, document.body);
});
</script>
<button class="btn small" id="shake-it">玛尼玛尼轰！文字抖起来！</button>