CSS代码抖音字体合集,文字彩色代码抖动效果

非网站永久会员,不再提供任何技术支持!

CSS代码抖音字体合集,文字彩色代码抖动效果-蝙蝠猫网-第6张图片

怎么实现抖音文字彩色抖动效果?

抖音的那个字是不是很酷炫呢?它是如何实现的呢?这一次的CSS笔记就和大家分享下实现抖音文字彩色抖动效果这个CSS特效

  • 代码演示1

CSS代码(里面渐变颜色可以自己修改)

.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: -2px -2px 0 #ff004f,2px 2px 0 #00f7ef } 50% { text-shadow: 2px -2px 0 #ff004f,-2px 2px 0 #00f7ef } 75% { text-shadow: -2px 2px 0 #ff004f,2px -2px 0 #00f7ef } 100% { text-shadow: 2px 2px 0 #ff004f,-2px -2px 0 #00f7ef } } @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) }

}

将以下代码插入需要增加的位置

<h2 class=\”doudong\”>欢迎来到MDP BLOG!</h2>

  • 代码演示2

有趣的眩晕文字:

.n-xy {
 text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
 animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

代码演示列如:

欢迎来到MDP BLOG!

  • 代码演示3

跳动抖音眩晕文字代码:

本站用的就是抖动代码

.douyinwenzi{animation:uk-text-shadow-glitch .65s cubic-bezier(1,-2.91,0,3.79) 0s infinite normal both running}
@keyframes uk-text-shadow-glitch{0%{text-shadow:none}
25%{text-shadow:-1px -1px 0 rgba(0,255,255,.5),1px 1px 0 rgba(255,0,0,.5)}
50%{text-shadow:1px -1px 0 rgba(0,255,255,.5),-1px 1px 0 rgba(255,0,0,.5)}
75%{text-shadow:-1px 1px 0 rgba(0,255,255,.5),1px -1px 0 rgba(255,0,0,.5)}
100%{text-shadow:1px 1px 0 rgba(0,255,255,.5),-1px -1px 0 rgba(255,0,0,.5)}
}

代码演示列如:

欢迎来到MDP BLOG!

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞115赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容