奇思妙想 CSS 文字动画 (2)

内嵌阴影文字效果

合理的阴影颜色和背景底色搭配，搭配，可以实现类似内嵌效果的阴影。

div { color: #202020; background-color: #2d2d2d; letter-spacing: .1em; text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636; }

CodePen Demo -- 5 text shadow effects in css3

氖光效果（Neon）

氖光效果，英文名叫 Neon，是我在 Codepen 上看到的最多的效果之一。它的原理非常简单，却可以产生非常酷炫的效果。

我们只需要设置 3~n 层阴影效果，每一层的模糊半径（文字阴影的第三个参数）间隔较大，并且每一层的阴影颜色相同即可。

p { color: #fff; text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff }

当然，通常运用 Neon 效果时，背景底色都是偏黑色。

合理运用 Neon 效果，就可以制作非常多有意思的动效。譬如作用于鼠标 hover 上去的效果：

p { transition: .2s; &:hover { text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff; } }

CodePen Demo -- Neon Demo

CodePen 上有一个 2K+ 赞的 DEMO，实现了非常赞的 Neon 效果，可以戳进去看看 CodePen -- Neon Glow。

也可以选取适当合适的字体，配合动画效果，实现一种渐进的亮灯效果：

<p> <span>n</span> <span>e</span> <span>o</span> <span>n</span> </p> p:hover span { animation: flicker 1s linear forwards; } p:hover #e { animation-delay: .2s; } p:hover #o { animation-delay: .5s; } p:hover #n2 { animation-delay: .6s; } @keyframes flicker { 0% { color: #333; } 5%, 15%, 25%, 30%, 100% { color: #fff; text-shadow: 0px 0px 5px var(--color), 0px 0px 10px var(--color), 0px 0px 20px var(--color), 0px 0px 50px var(--color); } 10%, 20% { color: #333; text-shadow: none; } }

截 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 :

<div>Clip</div> <style> div { font-size: 180px; font-weight: bold; color: deeppink; background: url($img) no-repeat center center; background-size: cover; } </style>

效果如下：

CodePen Demo

使用 background-clip:text

我们稍微改造下上面的代码，添加 -webkit-background-clip:text：

div { font-size: 180px; font-weight: bold; color: deeppink; background: url($img) no-repeat center center; background-size: cover; background-clip: text; }

效果如下：

CodePen Demo

看到这里，可能有人就纳闷了，这不就是文字设置 color 属性嘛。

别急，由于文字设置了颜色，挡住了 div 块的背景，如果将文字设置为透明呢？文字是可以设置为透明的 color: transparent 。

div { color: transparent; background-clip: text; }

效果如下：

CodePen Demo