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

当前位置:首页 / 正文

2020-09-20 | 编程技术 | 2213 次阅读 | 等你评论 | 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 风格?网上似乎还没有一个准确统一的定义。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰...
教你轻松拥有无限个邮箱
这里说的无限邮箱,不是去无限注册邮箱。 而是指你一个邮箱下有无限个子邮箱,或者说无限个影子邮箱。 实现方法比较多,本文推荐两种。 ![图片alt](https://cdn.wangt
部署 Monit 来监控服务
Monit 是一个轻量的监控工具,大小不到 2M,可运行于 linux 之上。 ![图片alt](https://cdn.wangtwothree.com/imgur/KyUrIC8.png '
(首次提交评论需审核通过才会显示,请勿重复提交)