css文字装饰text-decoration怎样使用�

Admin 2021-10-18 群英技术资�

    css文字装饰text-decoration怎样使用?文字装饰text-decoration的用法还是比较简单的,而且也很实用,因此这篇文章就给大家分享一下文字装饰text-decoration和文字强调text-emphasis的使用,感兴趣的朋友就继续往下看吧�

text-decoration 文字装饰

text-decoration 意为文字装饰,在很早的规� CSS Level 2 (Revision 1) -- text-decoration 就已经存在了。譬如我们非常熟知的下划� text-decoration: underline

p {
    text-decoration: underline;
}

而到了比较新� 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:控制修饰线的粗�

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

CodePen Demo -- Text-decoration Demo

text-decoration-line 可以同时设置

有意思的一点是�text-decoration-line 可以同时设置�

p {
    text-decoration-line: overline underline line-through;
}

我们可以得到上中下三条线�

text-decoration 可以进行过渡与动�

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 -- 文字下划线过渡动画效�

text-decoration-color � color 分离

text-decoration-colorcolor 是可以不一样的,类似于这样�

.color {
    text-decoration-style: wavy;
    cursor: pointer;
    transition: .5s;

    &:hover {
        color: transparent;
        text-decoration-color: pink;
    }
}

有意思,经过这样,我们其实得到了一条波浪线�

如果我们� wavy 下划线加给元素的伪元素,然后� hover 的时候添加一个动画,让波浪线动起来,得到一个非常好的强� hover 效果�

<p class="animation" data-content="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

text-emphasis 文字强调

text-emphasis 意为文字强调,是 CSS Text Decoration Module Level 3 才新增的一个属性,用于增强文字强调的效果�

在早些时候,我们如果要强调几个字,可能更多是使用加粗�斜体这种较为常规的文字样式类型:

{
    font-weight: bold;   // 加粗
    font-style: italic;  // 斜体
}

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

text-emphasis 语法

text-emphasis 包含� text-emphasistext-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: '';
}

text-emphasis-position 语法

除了在文字上方,还可以在一定范围内改变强调图形的位置,选择放置在文字的上方或者下方,利用 text-emphasis-position

这个属性接受上下与左右两个参数�

text-emphasis-position: [ over | under ] && [ right | left ]?

.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
    text-position: over left;
}
.emoji {
    text-emphasis: '';
    text-position: under left;
}

当文字的排版的书写顺序是水平排版布局,类� writing-mode: lr 时,只需要用� overunder 即可,当文本的排版布局模式是垂直模式时,类� writing-mode: vertical-lr,才会用� right 或� left 关键字�

p {
    writing-mode: vertical-rl;
}
.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
    text-position: over left;
}
.emoji {
    text-emphasis: '';
    text-position: under right;
}

使用 background 模拟下划�

除了 CSS 原生提供� text-decorationtext-emphasis 之外,我们还可以通过其他元素模拟一些文字装饰效果�

最常见的莫过于使用 background 模拟下划线了�

看个简单的 DEMO,使� background 模拟文字的下划线效果�

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus 
possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
</p>
p {
    width: 600px;
    font-size: 24px;
    color: #666;
}
a {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}

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

又或者,使用 background 模拟虚线下划线:

a {
    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 100% 100%;
}

CodePen Demo -- 使用 background 模拟下划线与虚线下划�

当然这个是最基础的,巧妙的运� background 的各种属性,我们实现各种有意思的效果�

巧妙改变 background-sizebackground-position 实现文字 hover 动效

这里,通过巧妙改变 background-sizebackground-position 属性,我们可以实现一些非常有意思的文字 hover 效果�

先看这样一� Demo,核心代码作用于� <p> 标签包裹� <a> 标签之上�

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus 
possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
</p>
a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    background-size: 100% 3px;
    color: #000;
}

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

看看最后的效果�

由于设定� background-position0 100%,如果,设定� background-position100% 100%,我们可以得到一个反向的效果�

// 其他都保持一致,只改� background-position,从 0 100% 改为 100% 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

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

CodePen Demo -- background underline animation

OK,如果我们使� background 实现两条重叠的下划线,再利用上述的两个不同的 background-position 值,我们就可以得到一个更有意思的下划� hover 效果�

CSS 代码示意,注意看两条使用 background 模拟的下划线� background-position 的值是不一样的�

a {
    background: 
        linear-gradient(90deg, #0cc, #0cc),
        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    background-size: 100% 3px, 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    transition: 0.5s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

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

CodePen Demo -- background underline animation

最�

    关于文字装饰text-decoration和文字强调text-emphasis的使用就介绍到这,另外本文还介绍了使� background 模拟下划线的内容,感兴趣的朋友可以了解看看,希望能对大家有帮助。最后,想要了解更多python算法的内容,大家可以关注其它的相关文章�

文本转载自脚本之�

标签� css文字装饰

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部