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

发布于 / 网页制作 / 1 条评论

原创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/

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

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

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

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

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

  1. 路过的小白

    em…大佬, 你的CSS内容把下面一段文字挡住了,汉字还好,字母就确实看不太清楚,希望尽快修复一下。。