Debug客栈
做一个爱分享的程序猿
Debug客栈
给网站文字添加高逼格”抖音”效果
给网站文字添加高逼格”抖音”效果

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

https://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://www.debuginn.cn/3445.html
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可,转载请保留此文章链接
相关链接: Debug客栈  |  Debug客栈引导页  |  加入交流群  |  赞助本站  |  博主微博  |  博主推特  |  音乐下载器
社会主义核心价值观: 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善
首页      技术文章      技术堆栈      给网站文字添加高逼格”抖音”效果

发表评论

textsms
account_circle
email

Debug客栈

给网站文字添加高逼格”抖音”效果
自己网站导航页一向比较“文静”,作为一个爱捣鼓的孩子,岂能任由其页面恶性发展,抖音看多了,想着是不是可以给自己的文字添加一下抖音效果,不料,网上资料是如此稀少,在借鉴了 沧水 …
扫描二维码继续阅读
2019-07-19