在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。
本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis，在最后，还会讲解使用 background 模拟文字下划线的一些有趣的动效。
text-decoration 意为文字装饰，在很早的规范 CSS Level 2 (Revision 1) -- text-decoration[1] 就已经存在了。譬如我们非常熟知的下划线 text-decoration: underline。
p { text-decoration: underline;}
而到了比较新的 CSS Text Decoration Module Level 3 - text-decoration[2]，text-decoration 得到了比较大的丰富更新，演化出了：
如今，text-decoration 是上述 4 个属性的的缩写。
其中：
这里有张非常好的图，帮助大家快速理解：
CodePen Demo -- Text-decoration Demo[3]
有意思的一点是，text-decoration-line 可以同时设置。
p { text-decoration-line: overline underline line-through;}
我们可以得到上中下三条线。
text-decoration 的每个值都是可以进行过渡与动画的。合理利用，在一些文本强调的地方，非常有用。
<p class="transition">Lorem ipsum dolor</p>.transition { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 0.1em; cursor: pointer; transition: .5s; &:hover { text-decoration-color: pink; text-decoration-thickness: 0.15em; color: pink; }}
配合另外一个属性 text-underline-offset，我们还可以实现如下图这样有趣的效果：
当然，上述的例子中使用了 text-underline-offset 的变换，但是本身 CSS 是不支持 text-underline-offset 的过渡动画的，这里借助了 CSS @property 巧妙的实现了 text-underline-offset 的过渡动画，感兴趣的可以具体了解下 CSS @property 的用法。
CodePen Demo -- 文字下划线过渡动画效果[4]
text-decoration-color 与 color 是可以不一样的，类似于这样。
.color { text-decoration-style: wavy; cursor: pointer; transition: .5s; &:hover { color: transparent; text-decoration-color: pink; }}
有意思，经过这样，我们其实得到了一条波浪线。
如果我们把 wavy 下划线加给元素的伪元素，然后在 hover 的时候添加一个动画，让波浪线动起来，得到一个非常好的强调 hover 效果：
<p class="animation" data-cnotallow="Lorem ibsum dolor Lorem ibsum dolor">Lorem ibsum dolor</p>.animation { position: relative; text-decoration: none; overflow: hidden; cursor: pointer; line-height: 2; &::before { content: attr(data-content); position: absolute; top: 0; left: 0; color: transparent; white-space: nowrap; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: #000; z-index: -1; } &:hover::before { animation: move 3s infinite linear; }}@keyframes move { 100% { transform: translate(-209px, 0); }}
我们利用伪元素添加了一段长于文本本身的文本，并且颜色为透明，但是设置了波浪线的颜色，然后 hover 的时候，通过运动伪元素的 translate 进行波浪线的位移，稍微调试一下 translate 的值，可以做到动画的首尾相连，实现运动的波浪线的效果。
CodePen Demo -- text-decoration Demo[5]
text-emphasis 意为文字强调，是 CSS Text Decoration Module Level 3[6] 才新增的一个属性，用于增强文字强调的效果。
在早些时候，我们如果要强调几个字，可能更多是使用加粗，斜体这种较为常规的文字样式类型：
{ font-weight: bold; // 加粗 font-style: italic; // 斜体}现在，多了一种有意思的强调方式 -- text-emphasis。
text-emphasis 包含了 text-emphasis 和 text-emphasis-position，允许我们在文字上方或者下方添加不同的强调装饰以及不同的颜色。
看个简单的 Demo：
<p> This is <span>Text-emphasis</span>.</p>p span{ text-emphasis: circle;}text-emphasis: circle 的效果是给包裹的文字，在其上方，添加 circle 图形，也就是圆圈图形，效果如下：
当然，默认是黑色的，我们可以在 circle 后面补充颜色：
p span{ text-emphasis: circle #f00;}
除了 circle，还提供非常多种图形可以选择，也可以自定义传入字符，甚至是 emoji 表情：
<p> A B C D <span class="keyword">E F</span> G H <span class="word">I J</span> K L <span class="emoji">M N</span></p>.keyword { text-emphasis: circle #f00;}.word { text-emphasis: 'x' blue;}.emoji { text-emphasis: '
本文链接：http://www.28at.com/showinfo-26-70457-0.html太强了！CSS 文字效果还能这样玩
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号