热门推荐

    [CSS教程] 详解CSS 文字装饰 text-decoration & text-emphasis

    百宝网 Lv.7 显示全部楼层 发表于 2021-8-19 19:41:41
    在 CSS 中,文字算是我们天天会打交道的一大类了,有了文字,则必不可少一些文字装饰。
    本文将讲讲两个比较新的文字装饰的概念 text-decorationtext-emphasis,在最后,还会讲解使用 background 模拟文字下划线的一些有趣的动效。

    text-decoration 文字装饰


    text-decoration 意为文字装饰,在很早的规范 CSS Level 2 (Revision 1) -- text-decoration 就已经存在了。譬如我们非常熟知的下划线 text-decoration: underline
    1. p {
    2.     text-decoration: underline;
    3. }
    复制代码

    2021040615191738.png

    2021040615191738.png


    而到了比较新的 CSS Text Decoration Module Level 3 - text-decoration,text-decoration 得到了比较大的丰富更新,演化出了 text-decoration-line, text-decoration-color, text-decoration-style,和还未成为标准的 text-decoration-thickness 等属性,是它们的缩写。
    其中:
    • text-decoration-line:控制用于设置元素中的文本的修饰类型,是在文本下方、上方还是贯穿文本
    • text-decoration-style:不仅仅是实线 solid,类似于 border-style,还支持双实线 double、点划线 dotted、虚线 dashed 以及非常有意思的 wavy 波浪线
    • text-decoration-color:这个好理解,控制颜色
    • text-decoration-thickness:控制修饰线的粗细

    这里有张非常好的图,帮助大家快速理解:

    2021040615191839.png

    2021040615191839.png


    CodePen Demo -- Text-decoration Demo
    text-decoration-line 可以同时设置
    有意思的一点是,text-decoration-line 可以同时设置。
    1. p {
    2.     text-decoration-line: overline underline line-through;
    3. }
    复制代码


    2021040615191840.png

    2021040615191840.png


    我们可以得到上中下三条线。
    text-decoration 可以进行过渡与动画
    text-decoration 的每个值都是可以进行过渡与动画的。合理利用,在一些文本强调的地方,非常有用。
    1. Lorem ipsum dolor
    复制代码
    1. .transition {
    2.     text-decoration-line: underline;
    3.     text-decoration-color: transparent;
    4.     text-decoration-thickness: 0.1em;
    5.     cursor: pointer;
    6.     transition: .5s;
    7.     &:hover {
    8.         text-decoration-color: pink;
    9.         text-decoration-thickness: 0.15em;
    10.         color: pink;
    11.     }
    12. }
    复制代码


    2021040615191841.gif

    2021040615191841.gif


    配合另外一个属性 text-underline-offset,我们还可以实现如下图这样有趣的效果:

    2021040615191842.gif

    2021040615191842.gif


    当然,上述的例子中使用了 text-underline-offset 的变换,但是本身 CSS 是不支持 text-underline-offset 的过渡动画的,这里借助了 CSS @property 巧妙的实现了 text-underline-offset 的过渡动画,感兴趣的可以具体了解下 CSS @property 的用法。
    CodePen Demo -- 文字下划线过渡动画效果
    text-decoration-color 与 color 分离
    text-decoration-colorcolor 是可以不一样的,类似于这样。
    1. .color {
    2.     text-decoration-style: wavy;
    3.     cursor: pointer;
    4.     transition: .5s;
    5.     &:hover {
    6.         color: transparent;
    7.         text-decoration-color: pink;
    8.     }
    9. }
    复制代码


    2021040615191843.gif

    2021040615191843.gif


    有意思,经过这样,我们其实得到了一条波浪线。
    如果我们把 wavy 下划线加给元素的伪元素,然后在 hover 的时候添加一个动画,让波浪线动起来,得到一个非常好的强调 hover 效果:
    1. Lorem ibsum dolor
    复制代码
    1. .animation {
    2.     position: relative;
    3.     text-decoration: none;
    4.     overflow: hidden;
    5.     cursor: pointer;
    6.     line-height: 2;
    7.    
    8.     &::before {
    9.         content: attr(data-content);
    10.         position: absolute;
    11.         top: 0;
    12.         left: 0;
    13.         color: transparent;
    14.         white-space: nowrap;
    15.         text-decoration-line: underline;
    16.         text-decoration-style: wavy;
    17.         text-decoration-color: #000;
    18.         z-index: -1;
    19.     }
    20.     &:hover::before {
    21.         animation: move 3s infinite linear;
    22.     }
    23. }
    24. @keyframes move {
    25.     100% {
    26.         transform: translate(-209px, 0);
    27.     }
    28. }
    复制代码


    2021040615191844.gif

    2021040615191844.gif


    我们利用伪元素添加了一段长于文本本身的文本,并且颜色为透明,但是设置了波浪线的颜色,然后 hover 的时候,通过运动伪元素的 translate 进行波浪线的位移,稍微调试一下 translate 的值,可以做到动画的首尾相连,实现运动的波浪线的效果。
    CodePen Demo -- text-decoration Demo

    text-emphasis 文字强调


    text-emphasis 意为文字强调,是 CSS Text Decoration Module Level 3 才新增的一个属性,用于增强文字强调的效果。
    在早些时候,我们如果要强调几个字,可能更多是使用加粗,斜体这种较为常规的文字样式类型:
    1. {
    2.     font-weight: bold;   // 加粗
    3.     font-style: italic;  // 斜体
    4. }
    复制代码

    现在,多了一种有意思的强调方式 -- text-emphasis

    text-emphasis 语法


    text-emphasis 包含了 text-emphasistext-emphasis-position,允许我们在文字上方或者下方添加不同的强调装饰以及不同的颜色。
    看个简单的 Demo:

    1.    This is Text-emphasis.
    复制代码
    1. p span{
    2.     text-emphasis: circle;
    3. }
    复制代码

    text-emphasis: circle 的效果是给包裹的文字,在其上方,添加 circle 图形,也就是圆圈图形,效果如下:

    2021040615191845.png

    2021040615191845.png


    当然,默认是黑色的,我们可以在 circle 后面补充颜色:
    1. p span{
    2.     text-emphasis: circle #f00;
    3. }
    复制代码


    2021040615191846.png

    2021040615191846.png


    除了 circle,还提供非常多种图形可以选择,也可以自定义传入字符,甚至是 emoji 表情:

    1.     A B C D  
    2.     E F
    3.     G H
    4.     I J
    5.     K L
    6.     M N
    复制代码
    1. .keyword {
    2.     text-emphasis: circle #f00;
    3. }
    4. .word {
    5.     text-emphasis: 'x' blue;
    6. }
    7. .emoji {
    8.     text-emphasis: '';
    9. }
    复制代码


    2021040615191847.png

    2021040615191847.png


    text-emphasis-position 语法


    除了在文字上方,还可以在一定范围内改变强调图形的位置,选择放置在文字的上方或者下方,利用 text-emphasis-position
    这个属性接受上下与左右两个参数:
    [codea]text-emphasis-position: [ over | under ] && [ right | left ]?[/codea]
    1. .keyword {
    2.     text-emphasis: circle #f00;
    3. }
    4. .word {
    5.     text-emphasis: 'x' blue;
    6.     text-position: over left;
    7. }
    8. .emoji {
    9.     text-emphasis: '';
    10.     text-position: under left;
    11. }
    复制代码

    当文字的排版的书写顺序是水平排版布局,类似 writing-mode: lr 时,只需要用到 overunder 即可,当文本的排版布局模式是垂直模式时,类似 writing-mode: vertical-lr,才会用到 right 或者 left 关键字。
    1. p {
    2.     writing-mode: vertical-rl;
    3. }
    4. .keyword {
    5.     text-emphasis: circle #f00;
    6. }
    7. .word {
    8.     text-emphasis: 'x' blue;
    9.     text-position: over left;
    10. }
    11. .emoji {
    12.     text-emphasis: '';
    13.     text-position: under right;
    14. }
    复制代码


    2021040615191848.png

    2021040615191848.png


    使用 background 模拟下划线


    除了 CSS 原生提供的 text-decorationtext-emphasis 之外,我们还可以通过其他元素模拟一些文字装饰效果。
    最常见的莫过于使用 background 模拟下划线了。
    看个简单的 DEMO,使用 background 模拟文字的下划线效果:
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
    复制代码
    1. p {
    2.     width: 600px;
    3.     font-size: 24px;
    4.     color: #666;
    5. }
    6. a {
    7.     background: linear-gradient(90deg, #0cc, #0cc);
    8.     background-size: 100% 3px;
    9.     background-repeat: no-repeat;
    10.     background-position: 100% 100%;
    11.     color: #0cc;
    12. }
    复制代码

    使用 background 模拟文字的下划线效果,效果图如下:

    2021040615191849.png

    2021040615191849.png


    又或者,使用 background 模拟虚线下划线:
    1. a {
    2.     background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    3.     background-size: 10px 2px;
    4.     background-repeat: repeat-x;
    5.     background-position: 100% 100%;
    6. }
    复制代码


    2021040615191850.png

    2021040615191850.png


    CodePen Demo -- 使用 background 模拟下划线与虚线下划线
    当然这个是最基础的,巧妙的运用 background 的各种属性,我们实现各种有意思的效果。
    巧妙改变 background-sizebackground-position 实现文字 hover 动效
    这里,通过巧妙改变 background-sizebackground-position 属性,我们可以实现一些非常有意思的文字 hover 效果。
    先看这样一个 Demo,核心代码作用于被 [codea][/codea] 标签包裹的 [codea][/codea] 标签之上:
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
    复制代码
    1. a {
    2.     background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    3.     background-size: 0 3px;
    4.     background-repeat: no-repeat;
    5.     background-position: 0 100%;
    6.     transition: 1s all;
    7.     color: #0cc;
    8. }
    9. a:hover {
    10.     background-size: 100% 3px;
    11.     color: #000;
    12. }
    复制代码

    我们虽然,设定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff),但是一开始默认它的 background-size: 0 3px,也就是一开始是看不到下划线的,当 hover 的时候,改变 background-size: 100% 3px,这个时候,就会有一个 0 3px100% 3px 的变换,也就是一个从无到有的伸展效果。
    看看最后的效果:

    2021040615191851.gif

    2021040615191851.gif


    由于设定的 background-position0 100%,如果,设定的 background-position100% 100%,我们可以得到一个反向的效果:
    1. // 其他都保持一致,只改变 background-position,从 0 100% 改为 100% 100%
    2. a {
    3.     ...
    4.     background-position: 100% 100%;
    5.     ...
    6. }
    复制代码

    再看看效果,你可以对比着上面的动图看看具体的差异点在哪:

    2021040615191852.gif

    2021040615191852.gif


    CodePen Demo -- background underline animation
    OK,如果我们使用 background 实现两条重叠的下划线,再利用上述的两个不同的 background-position 值,我们就可以得到一个更有意思的下划线 hover 效果。
    CSS 代码示意,注意看两条使用 background 模拟的下划线的 background-position 的值是不一样的:
    1. a {
    2.     background:
    3.         linear-gradient(90deg, #0cc, #0cc),
    4.         linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    5.     background-size: 100% 3px, 0 3px;
    6.     background-repeat: no-repeat;
    7.     background-position: 100% 100%, 0 100%;
    8.     transition: 0.5s all;
    9.     color: #0cc;
    10. }
    11. a:hover {
    12.     background-size: 0 3px, 100% 3px;
    13.     color: #000;
    14. }
    复制代码

    可以得到这样一种效果,其实每次 hover, 都有两条下划线在移动:

    2021040615191953.gif

    2021040615191953.gif


    CodePen Demo -- background underline animation

    最后


    好了,本文到此结束,介绍了关于文字装饰的一些有意思的属性及动效,希望对你有帮助 
    更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
    到此这篇关于详解CSS 文字装饰 text-decoration & text-emphasis的文章就介绍到这了,更多相关CSS 文字装饰内容请搜索百宝网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持百宝网!


    回复

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部

  • 快速回复 返回顶部 返回列表