css文字装饰text-decoration怎样使用�
Admin 2021-10-18 群英技术资�
css文字装饰text-decoration怎样使用?文字装饰text-decoration的用法还是比较简单的,而且也很实用,因此这篇文章就给大家分享一下文字装饰text-decoration和文字强调text-emphasis的使用,感兴趣的朋友就继续往下看吧�
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-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-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
意为文字强调,是 CSS Text Decoration Module Level 3 才新增的一个属性,用于增强文字强调的效果�
在早些时候,我们如果要强调几个字,可能更多是使用加粗�斜体这种较为常规的文字样式类型:
{ 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: ''; }
除了在文字上方,还可以在一定范围内改变强调图形的位置,选择放置在文字的上方或者下方,利用 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
时,只需要用� over
�under
即可,当文本的排版布局模式是垂直模式时,类� 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; }
除了 CSS 原生提供� text-decoration
� text-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-size
� background-position
实现文字 hover 动效
这里,通过巧妙改变 background-size
� background-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 3px
� 100% 3px
的变换,也就是一个从无到有的伸展效果�
看看最后的效果�
由于设定� background-position
� 0 100%
,如果,设定� background-position
� 100% 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算法的内容,大家可以关注其它的相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
小编今天来给大家说说看HTML+CSS单列和水平居中布局的相关介绍,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧�
这篇文章主要介绍了利用css制作3D照片墙效�,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
css文本属性有哪些?css文本属性主要是针对文本的,能够设置文本颜色,文本对齐方式,文本修饰,文本行高等等。这篇文章总结了一些css文本属性,都是很有用的,感兴趣的朋友能够看一下�
这篇文章给大家分享的是CSS3中怎样取消加粗文本的方法。在CSS3中,font-weight是设置文本粗细的,想要取消文本的加粗效果,那么给设置属性值为normal就可以了,接下来我们来看看具体的实现及代码是怎样的�
本篇文章主要介绍了css-解决font-weight:blod跳动问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078