给网站文字添加高逼格效果

Meng小羽

发布于 2019-12-24 14:15:27

6300

发布于 2019-12-24 14:15:27

文章被收录于专栏：Debug客栈

自己网站导航页一向比较“文静”，作为一个爱捣鼓的孩子，岂能任由其页面恶性发展，抖音看多了，想着是不是可以给自己的文字添加一下抖音效果，不料，网上资料是如此稀少，在借鉴了沧水大佬的代码后，分析其原理，就是一个CSS3动画效果，让自己的阴影左右摆动形成的，效果就是上面的图片效果，同时你可以点击下面链接去查看实际的效果哦！！！

htt ps://demo.debuginn.cn/

代码奉上

.doudong{
      animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
    }
    @keyframes uk-text-shadow-glitch {
      0% {
        text-shadow: none
      }
      25% {
        text-shadow: -1px -1px 0 #ff0048,1px 1px 0 #3234ff
      }
      50% {
        text-shadow: 1px -1px 0 #ff0048,-1px 1px 0 #3234ff
      }
      75% {
        text-shadow: -1px 1px 0 #ff0048,1px -1px 0 #3234ff
      }
      100% {
        text-shadow: 1px 1px 0 #ff0048,-1px -1px 0 #3234ff
      }
    }
    @keyframes uk-flicker {
      0% {
        opacity: 0
      }
      10% {
        opacity: .6;
        transform: scale(.8)
      }
      20% {
        opacity: 0
      }
      40% {
        opacity: 1
      }
      50% {
        opacity: .2;
        transform: scale(1.1)
      }
      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

给自己的元素div加上 .doudong 就可以实现了，不管可以文字有效果，图片或者任意元素都有抖音效果，看着挺好玩的，想玩的可以拿去用哦。

本文链接：https://cloud.tencent.com/developer/article/1558644

本文采用CC BY-NC-SA 3.0 Unported协议进行许可，转载请保留此文章链接

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https