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

作者: 小但 分类: 精品教程,转载精品 发布时间: 2018-06-28 20:51

前言

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


正文

#静态效果

只需要给对应的选择器添加 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);
}
3条评论
  • 头像

    wqinf.com

    2018年11月12日 下午10:34

    有点期待呢,我的博客前几天也刚刚做了一个文字抖动的效果,在网站的右下角,你这个分享的有没有预览效果可以瞅一眼呢?

  • 头像

    七里夫人

    2018年6月30日 下午6:52

    可以可以,拿走试试看

    1. 小但

      小但

      2018年6月30日 下午6:53

      嘿嘿

发表评论

电子邮件地址不会被公开。 必填项已用*标注