-
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
奇思妙想 CSS 文字动画 #101
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
之前有写过两篇关于字体的文章,是关于如何定义字体的:
本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文字效果,利用不同的属性搭配,实现各式各样的文字动效。
Google Font
在写各种 DEMO 的时候,有的时候一些特殊的字体能更好的体现动画的效果。这里讲一个快速引入不同格式字体的小技巧。
就是 Google Font 这个网站,上面有非常多的不同的开源字体:
当我们相中了一个我们喜欢的字体,它也提供了非常快速的便捷的引入方式。选中对应的字体,选择
Select this style
,便可以通过link
和@import
两种方式引入:使用
link
标签引入:OR,在 CSS 代码中,使用
@import
引入:上述两种方式内部其实都是使用的
@font-face
进行了字体的定义。我们可以通过 @font-face 快速声明指定一个自定义字体。类似这样:
这样,利用 Google Font,我们就可以便捷的享受各种字体了。
我在我的个人项目或者一些 DEMO 中,需要一些艺术字体或者特殊字体展示不一样的效果时,经常会使用这种方式。而至于在业务中,是否需要引入一些特殊字体,就见仁见智了。
接下来,就会分门别类的看看,文字在 CSS 中,和不同属性相结合,能够鼓捣出什么样的效果。
文字与阴影
通过将字体与字体阴影
text-shadow
,相结合,阴影的不同运用方式,产生不一样的效果。我们通过一系列 Demo 来看看。
长阴影文字效果
通过多层次,颜色逐渐变化(透明)的阴影变化,可以生成长阴影:
当然,多重阴影以及每重的颜色我们很难一个一个手动去写,在写长阴影的时候通常需要借助
SASS
、LESS
去帮助节省时间:立体阴影文字效果
如果多层阴影,但是颜色变化没那么强烈,能够塑造一种立体的效果。
内嵌阴影文字效果
合理的阴影颜色和背景底色搭配,搭配,可以实现类似内嵌效果的阴影。
CodePen Demo -- 5 text shadow effects in css3
氖光效果(Neon)
氖光效果,英文名叫 Neon,是我在 Codepen 上看到的最多的效果之一。它的原理非常简单,却可以产生非常酷炫的效果。
我们只需要设置 3~n 层阴影效果,每一层的模糊半径(文字阴影的第三个参数)间隔较大,并且每一层的阴影颜色相同即可。
当然,通常运用 Neon 效果时,背景底色都是偏黑色。
合理运用 Neon 效果,就可以制作非常多有意思的动效。譬如作用于鼠标 hover 上去的效果:
CodePen Demo -- Neon Demo
CodePen 上有一个 2K 赞的 DEMO,实现了非常赞的 Neon 效果,可以戳进去看看 CodePen -- Neon Glow。
也可以选取适当合适的字体,配合动画效果,实现一种渐进的亮灯效果:
截 GIF 图的帧率不太够,看着效果不太好,可以点进下面的 DEMO 感受下:
CodePen Demo -- Neon Demo
文字与背景
CSS 中的背景 background,也提供了一些属性用于增强文字的效果。
background-clip 与文字
背景中有个属性为
background-clip
, 其作用就是设置元素的背景(背景图片或颜色)的填充规则。与
box-sizing
的取值非常类似,通常而言,它有 3 个取值,border-box
,padding-box
,content-box
,后面规范新增了一个background-clip
。时至今日,部分浏览器仍需要添加前缀 webkit 进行使用-webkit-background-clip
。使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
看个最简单的 Demo ,没有使用
background-clip:text
:效果如下:
CodePen Demo
使用
background-clip:text
我们稍微改造下上面的代码,添加
-webkit-background-clip:text
:效果如下:
CodePen Demo
看到这里,可能有人就纳闷了,这不就是文字设置
color
属性嘛。别急,由于文字设置了颜色,挡住了 div 块的背景,如果将文字设置为透明呢?文字是可以设置为透明的
color: transparent
。效果如下:
CodePen Demo
通过将文字设置为透明,原本 div 的背景就显现出来了,而文字以外的区域全部被裁剪了,这就是
background-clip:text
的作用。利用
background-clip
图文搭配这样,我们可以选取合适的图片合适的字体,实现任意风格的文字效果。
CodePen Demo -- background-clip: text & Image text
又或者,利用这个效果实现一张创意海报:
利用
background-clip
实现渐变文字再者,利用这个属性,也可以轻松的实现渐变色的文字:
配合
background-position
或者filter: hue-rotate()
,让渐变动起来:CodePen Demo -- background-clip: text 文字渐变色
利用
background-clip
给文字增加高光动画利用
background-clip
, 我们还可以轻松的给文字增加高光动画。譬如这样:
其本质也是利用了
background-clip
,伪代码如下:去掉伪元素的
background-clip: text
,就能看懂原理:CodePen Demo -- shine Text && background-clip
mask
与文字还有一个与背景相关的属性 --
mask
。之前在多篇文章都提到了
mask
,比较详细的一篇是 -- 奇妙的 CSS MASK,本文不对 mask 的基本概念做过多讲解,向下阅读时,如果对一些 mask 的用法感到疑惑,可以再去看看。只需要记住核心的,使用
mask
最重要结论就是:添加了 mask 属性的元素,其内容会与 mask 表示的渐变的 transparent 的重叠部分,并且重叠部分将会变得透明。利用
mask
,我们可以实现各种文字的出场特效:核心的 CSS 代码:
改变不同的方向,又或者是这样:
CodePen Demo -- MASK Text Effect
文字与混合模式(mix-blend-mode)及滤镜(filter)
接下来,就到了非常有意思的混合模式及滤镜了。这两个属性给 CSS 世界增添了非常多的趣味性,活灵活用,会感叹 CSS 居然如此的强大美妙。
之前有多非常多篇关于混合模式及滤镜的文章,一些基础的用法就不再赘述。
给文字添加边框,生成镂空文字
在 CSS 中,我们可以利用
-webkit-text-stroke
,给文字快速的添加边框,利用这个,可以快速生成镂空型的文字:当然,我们看到,用到的属性
-webkit-text-stroke
带了webkit
前缀,存在一定的兼容性问题。所以,在更早的时候,我们还会使用
text-shadow
,生成镂空文字。可以看到,因为使用的是阴影,所以有很明显的虚化的感觉,存在一定的瑕疵。
还有一种非常绕的方法,利用混合模式加上滤镜,也能生成镂空文字。
这里利用
filter: blur(1px)
生成了一个比原字体稍微大一点点的字体覆盖在原字体之上,再利用mix-blend-mode: difference
消除掉了同色的部分,只留下了利用模糊滤镜多出来的那一部分。示意动图如下:
CodePen Demo -- Hollow TEXT EFFECT
利用混合模式,生成渐变色镂空文字
好,回到上面的
-webkit-text-stroke
,拿到了镂空文字后,我们还可以利用混合模式mix-blend-mode: multiply
生成渐变色的文字。在这里,
mix-blend-mode: multiply
发挥的作用和 mask 非常的类似,我们其实是生成了一幅渐变图案,但是只有在文字轮廓内,渐变颜色才会显现。当然,上述效果和整体的黑色底色也是有关系的。
示意图如下:
CodePen Demo -- Hollow TEXT EFFECT
利用混合模式,生成光影效果文字
OK,在上述的基础上,我们可以继续叠加混合模式,这次我们利用剩余的一个
::after
伪类,再添加一个mix-blend-mode: color-dodge
混合模式,给文字加上最后的点缀,实现美妙的光影效果。核心的伪代码:
看看效果:
这里就要感叹
mix-blend-mode: color-dodge
的神奇了,去掉这个混合模式,其实是这样的:CodePen -- Hollow TEXT EFFECT
好,就上面这个效果,还可以继续吗?答案是可以的。限于篇幅,本文不再继续在这个效果上深入,感兴趣的可以拿着上面的 DEMO 自己再捣鼓捣鼓。
利用混合模式实现文字与底色反色的效果
这里还是利用
mix-blend-mode: difference
差值模式,实现一种文字与底色反色的 Title 效果。代码非常的简单,我们实现一个黑白相间的背景,文本的颜色为白色,配合上差值模式,即可实现黑底上的文字为白色,白底上的文字为黑色的效果。
可以用于一些标题效果:
CodePen Demo -- Radial-gradient Mix-blend-mode
利用混合模式实现动态类抖音风格 Glitch 效果
OK,接下来,我们再尝试下其他混合模式的搭配。在 CSS 故障艺术 一文中,提到了一种故障艺术。
什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉,看起来具有闪烁、震动的效果,很吸引人眼球。
关键点
看看效果:
本文篇幅有点长,代码就不上了,完整 DEMO 在这里:
类抖音 LOGO 文字故障效果
当然,我们也不是一定要使用混合模式去使得融合部分为白色,可以仅仅是使用这个配色效果,基于上面效果的另外一个版本,没有使用混合模式。
关键点
完整 DEMO 在这里:
CSS文字故障效果
仅仅使用配色没有使用混合模式的好处在于,对于每一个文字的副本,有了更大的移动距离和可以处理的空间。
Glitch Art 风格的 404 效果
稍微替换一下文本文案为 404,再添加上一些滤镜效果(
hue-rotate()
、blur()
)嘿嘿,找到了一个可能实际可用的场景:效果一:
效果二:
两个 404 效果的 Demo 如下:
使用滤镜生成文字融合效果
在 你所不知道的 CSS 滤镜技巧与细节 一文中,介绍了利用滤镜实现的一种融合效果。
利用了模糊滤镜叠加对比度滤镜产生的融合效果。
单独将两个滤镜拿出来,它们的作用分别是:
filter: blur()
: 给图像设置高斯模糊效果。filter: contrast()
: 调整图像的对比度。但是,当他们“合体”的时候,产生了奇妙的融合现象。简单的例子:
CodePen Demo -- filter mix between blur and contrast
利用这个特性,可以实现一些文字融合的效果:
利用这个方法,我们还可以设计一些文字融合的效果:
具体实现你可以看这里:
CodePen Demo -- word animation | word filter
文字与 SVG
最后,我们再来看看文字与 SVG。
在 SVG 与 CSS 的搭配中,有一类非常适合拿来做动画的属性,也就是
stroke-*
相关的几个属性,利用它们,我们只需要掌握简单的 SVG 语法,就可以快速制作相关的线条动画。我们利用 SVG 中几个和边框、线条相关的属性,来实现文字的线条动画,下面罗列一下,其实大部分和 CSS 对比一下非常好理解,只是换了个名字:
线条文字动画
接下来,我们利用
stroke-*
相关属性,实现一个简单的线条文字动画。动画的核心就是,利用动态变化文字的
stroke-dasharray
和stroke-dashoffset
形成视觉上的线条变换,动画的最后再给文字上色。看看效果:CodePen Demo -- SVG Text Line Effect
最后
本文介绍了一些我认为比较有意思的文字动画小技巧,当然 CSS 中还有非常多有意思的文字效果,限于篇幅,不一一展开。
本文到此结束,希望对你有帮助 :),想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
The text was updated successfully, but these errors were encountered: