原创html抖音效果CSS,文字彩色抖动效果CSS

请注意！为了用户体验，请勿在某些重要的页面使用这种抖动效果！被领导/用户/朋友/路人…喷瞎眼本人概不负责

本效果非常简单，其实就是一个CSS3的动画效果

直接将这下面段放进你的style.css或者用<style>写入html文件

.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"

完成之后的效果可以看这里（眼疾患者慎入）：https://cangshui.net/-otherweb/findme.html

这个特效是不是感觉十分的伤眼睛，我自己写出来整个人都不好了，其实本来我写这个特效并不是为了仿抖音，而是给朋友做一个足够引人注意的标题特效，然后写出来一看发现怎么就有点….不得劲呢，然后想标题的时候不知道写什么好，我总不能写一个“CSS瞎几把闪特效”吧，然后我百度了一下同类型的特效文章标题，就选了这一个，感觉有点名不副实啊？？不是很像抖音的特效哈哈哈哈

这篇文章我想申请百度原创，可是不给过，我透，说我字数没有三百字，绝了难道上面的代码部分就不算字了？难道不是我敲出来的？？感觉对他们的审核程序感到失望，所以我现在正在敲这一段字，来凑够300字数

原文链接：沧水的博客https://cangshui.net/?p=3237

本文为沧水博客原创的文章，转载请以链接形式标明本文地址

本文链接：https://cangshui.net/?p=3237