怎么实现抖音文字彩色抖动效果? - css笔记

抖音的那个字是不是很酷炫呢?它是如何实现的呢?这一次的CSS笔记就和大家分享下实现抖音文字彩色抖动效果这个CSS特效

抖音的那个字是不是很酷炫呢?它是如何实现的呢?这一次的CSS笔记就和大家分享下实现抖音文字彩色抖动效果这个CSS特效。

第一个,有趣的眩晕文字:

.n-xy {
	text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
	animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

效果:

有趣的彩色眩晕文字 - Npcink

第二个:彩色抖动文字

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

效果:

彩色抖动文字 - Npcink

第三个:抖音彩色抖动文本

怎么实现抖音文字彩色抖动效果? - css笔记-Npcink

太复杂了,链接中有详细的步骤说明可供参考。

最后修改: 2020-04-29 01:32
css

给div添加背景图片和背景颜色 - css笔记

2020-4-26 7:30:39

css

怎么用css实现水平垂直绝对居中? - css笔记

2020-4-29 21:48:42

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索