这篇文章上次修改于 1625 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
最近听说了一款挺火的软件,叫 “抖音”,发现它的标志有蓝红双色的叠加。我突然想到,我们的网站文字能否做出这个效果,甚至让文字像这个一样抖起来?答案当然是可以的。
静态效果
只需要给对应的选择器添加 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》的加载音乐噢!转载请勿直接复制该链接!
已有 24 条评论
wow,好酷啊
已使用♂
哇哈哈哈哈,好魔性嗷。啊我的眼睛/捂脸...
艾玛,闪瞎了我的钛合金眼
@Yawee 哈哈艹,点之前没想到能这么沙雕
老哥,文章最后这个按钮点击效果怎么搞得啊?我的意思指你是把按钮所需的代码是一起写在文章里面加载出来的吗??
@Manic 加群是最好的选择 😋
加上音乐蛮有感觉的
图片可以用 hue-rotate 来实现QWQ
撸多了也是这感觉