本站长承接,网站搭建,网站美化,wordpress网站速度优化,网站各种疑难杂症,vpn方案,小程序搭建,视频网站解决方案,视频播放器解析源码(带暂停广告,视频广告功能),视频播放跨域,视频直播流解决方案等等,欢迎来聊~
只有你想不到,没有我做不到( •̀ ω •́ )✧ 微信:wasabiidc

167素材网

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

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

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

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)
    }
};
  }
}

然后在你的标签里加入class="doudong",例如

<h1 class="doudong">欢迎来到MDP BLOG!</h1>

下面是演示

欢迎来到MDP BLOG!

167素材网

Madapang

一个喜欢撸猫,听歌,玩小霸王,睡觉的人。

相关推荐

4 条评论

  1. 感谢分享,谢谢博主。

  2. 我整理了一下,转载了。
    转载地址:https://www.npc.ink/15635.html

  3. 不错,使用了。

  4. 这个不错,在抖音很多视频中都看到过这个效果,没想到还可以用CSS实现。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

CSS抖音文字效果,文字彩色抖动效果
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close