css如何使文字抖动,纯CSS文字彩色抖动抖音效果

效果

纯CSS文字彩色抖动抖音效果

简介

直接将这下面段放进你的 style.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 #ff0048,2px 2px 0 #3234ff

}

50% {

text-shadow: 2px –2px 0 #ff0048,-2px 2px 0 #3234ff

}

75% {

text-shadow: –2px 2px 0 #ff0048,2px –2px 0 #3234ff

}

100% {

text-shadow: 2px 2px 0 #ff0048,-2px –2px 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)

}

然后把你需要抖起来的那个文本标签 <> 内加入 class="doudong"

css如何使文字抖动,纯CSS文字彩色抖动抖音效果相关推荐

html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.co ...
css动态彩虹背景,59.纯 CSS 创作彩虹背景文字
感想: 又一次见识到CSS的强大之处,当然MDN文档也是666: HTML code: thanks CSS code: html, body { margin:; padding:; } /* 设置 ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
纯css导航下拉_纯CSS标签导航
纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...
css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/ ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
html怎么实现蓝色垂直的直线,css实例教程一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...

css如何使文字抖动,纯CSS文字彩色抖动抖音效果

css如何使文字抖动,纯CSS文字彩色抖动抖音效果相关推荐

最新文章

热门文章