本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2020-09-20 | 编程技术 | 2474 次阅读 | 等你评论 | 0 次点赞 | 繁体

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

wTOMvD.jpg

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>

via:
https://www.madapang.com/technology/csstiktok.html

标签: css

猜你喜欢
github 的黑夜模式小猫咪动画源码
github 上的小猫咪黑夜模式切换很可爱,想要~ 。于是花了点时间扒了下来放在了自己的博客上。秉着开源精神,将源码分享给大家。废话少说,上代码html:<!-- 暗黑模式 --> ...
[前端] CSS 实现新拟态(Neumorphism) UI 风格
什么是新拟态(Neumorphism) UI 风格?网上似乎还没有一个准确统一的定义。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰...
PHP 自动爬毒汤日历搭建毒鸡汤一言 API 接口
什么是毒汤日历?毒汤日历是一本有毒的日历,每天用毒鸡汤来唤醒你。 你甚至不用打开日历,打开 App 的推送,每天会定时送上一杯毒鸡汤。 自己也能制作毒鸡汤?那太好了,毒性够强,如果让别人扎到心你就厉害
漫威宇宙时间线观看顺序(持续更新)
漫威宇宙是一个相当庞大的系列。 **单就漫威电影来说,按系列分,可分为:** 《钢铁侠》《无敌浩克》《美国队长》《雷神》《银河护卫队》《黑豹》《蚁人》《奇异博士》《蜘蛛侠》《惊奇队长》《复
[插件] 破解版的 Google 访问助手
在国内,访问 Google 是最蛋疼的事了,原因是显然易见的。 可是作为一个三流程序猿,上 Google 是相当重要的。 基本上自己都是白嫖同事的 ss,白嫖总是麻烦,还要用 ss 客户端
(首次提交评论需审核通过才会显示,请勿重复提交)