-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
巧用滤镜实现高级感拉满的文字快闪切换效果 #149
Comments
学不动了 |
太骚了! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
今天偶然看到这样一类很有意思的文字快闪动画:
这类文字快闪切换效果运用得当的话,能比较好的吸引用户的眼球。
当然,今天并非是想用 CSS 实现上述的的效果。在尝试的过程中,我发现了另外一类能够使用 CSS 非常轻松实现文字快闪动画,运用了
blur()
滤镜和contrast()
滤镜产生的融合效果,类似于这样:这个技巧也在多篇文章就提及,本文再简述下。
blur 滤镜混合 contrast 滤镜产生融合效果
本文的重点,模糊滤镜叠加对比度滤镜产生的融合效果。单独将两个滤镜拿出来,它们的作用分别是:
filter: blur()
: 给图像设置高斯模糊效果。filter: contrast()
: 调整图像的对比度。但是,当他们“合体”的时候,产生了奇妙的融合现象。
先来看一个简单的例子:
CodePen Demo -- filter mix between blur and contrast
仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。
上述效果的实现基于两点:
filter: contrast()
的画布背景上进行动画的filter: blur()
( 进行动画的图形的父元素需要是被设置了filter: contrast()
的画布)当然,背景色不一定是白色,我们稍稍修改上面的Demo,简单的示意图如下:
使用 blur/contrast 滤镜实现文字的切换
利用上述的技巧,我们可以实现文字的融合效果,像是这样:
CodePen Demo -- word animation | word filter
这样,利用这个技巧,我们可以巧妙构思一下动画:
animation-delay
进行控制处理)核心代码如下:
整段代码,核心需要关注
@keyframes change
这个动画,我们通过顺序给文字添加上这个动画(也就是利用animation-delay
顺序添加了延时)实现了上一个文字消失的过程下一个文字显示的效果。上述的
.g-container
添加了这样一句代码 --filter: contrast(15)
,去掉这句的话,效果是这样的:加上这句关键的代码 --
filter: contrast(15)
,整个效果就如一开始的题图所示:CodePen Demo -- 纯 CSS 实现文字融合快闪切换效果
整个动画的两个核心关键点:
blur
滤镜混合contrast
滤镜产生融合效果由此,你可以通过 HTML 控制文字的条数、改变 SASS 变量中表示动画时长的
$speed
和文字条数的$wordCount
以及最终@keyframes change
里面的参数,不断去调整优化你要的效果。演变出各种文字快闪效果。最后
好了,本文到此结束,希望本文对你有所帮助 :)
想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
The text was updated successfully, but these errors were encountered: