有意思！CSS 文字裝飾還能這樣玩~
在 CSS 中，文字算是我們天天會打交道的一大類了，有了文字，則必不可少一些文字裝飾。
本文將講講兩個(gè)比較新的文字裝飾的概念 text-decoration 與 text-emphasis，在最后，還會講解使用 background 模擬文字下劃線的一些有趣的動效。
text-decoration 文字裝飾
text-decoration 意為文字裝飾，在很早的規(guī)范 CSS Level 2 (Revision 1) -- text-decoration[1] 就已經(jīng)存在了。譬如我們非常熟知的下劃線 text-decoration: underline。
- p {
- text-decoration: underline;
- }
image
而到了比較新的 CSS Text Decoration Module Level 3 - text-decoration[2]，text-decoration 得到了比較大的豐富更新，演化出了：
- text-decoration-line
- text-decoration-color
- text-decoration-style
- 和還未成為標(biāo)準(zhǔn)的 text-decoration-thickness 等屬性。
如今，text-decoration 是上述 4 個(gè)屬性的的縮寫。
其中：
- text-decoration-line：控制用于設(shè)置元素中的文本的修飾類型，是在文本下方、上方還是貫穿文本
- text-decoration-style：不僅僅是實(shí)線 solid，類似于 border-style，還支持雙實(shí)線 double、點(diǎn)劃線 dotted、虛線 dashed 以及非常有意思的 wavy 波浪線
- text-decoration-color：這個(gè)好理解，控制顏色
- text-decoration-thickness：控制修飾線的粗細(xì)
這里有張非常好的圖，幫助大家快速理解：
image
CodePen Demo -- Text-decoration Demo[3]
text-decoration-line 可以同時(shí)設(shè)置
有意思的一點(diǎn)是，text-decoration-line 可以同時(shí)設(shè)置。
- p {
- text-decoration-line: overline underline line-through;
- }
image
我們可以得到上中下三條線。
text-decoration 可以進(jìn)行過渡與動畫
text-decoration 的每個(gè)值都是可以進(jìn)行過渡與動畫的。合理利用，在一些文本強(qiáng)調(diào)的地方，非常有用。
- <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;
- }
- }
配合另外一個(gè)屬性 text-underline-offset，我們還可以實(shí)現(xiàn)如下圖這樣有趣的效果：
當(dāng)然，上述的例子中使用了 text-underline-offset 的變換，但是本身 CSS 是不支持 text-underline-offset 的過渡動畫的，這里借助了 CSS @property 巧妙的實(shí)現(xiàn)了 text-underline-offset 的過渡動畫，感興趣的可以具體了解下 CSS @property 的用法。
CodePen Demo -- 文字下劃線過渡動畫效果[4]
text-decoration-color 與 color 分離
text-decoration-color 與 color 是可以不一樣的，類似于這樣。
- .color {
- text-decoration-style: wavy;
- cursor: pointer;
- transition: .5s;
- &:hover {
- color: transparent;
- text-decoration-color: pink;
- }
- }
有意思，經(jīng)過這樣，我們其實(shí)得到了一條波浪線。
如果我們把 wavy 下劃線加給元素的偽元素，然后在 hover 的時(shí)候添加一個(gè)動畫，讓波浪線動起來，得到一個(gè)非常好的強(qiáng)調(diào) 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);
- }
- }
我們利用偽元素添加了一段長于文本本身的文本，并且顏色為透明，但是設(shè)置了波浪線的顏色，然后 hover 的時(shí)候，通過運(yùn)動偽元素的 translate 進(jìn)行波浪線的位移，稍微調(diào)試一下 translate 的值，可以做到動畫的首尾相連，實(shí)現(xiàn)運(yùn)動的波浪線的效果。
CodePen Demo -- text-decoration Demo[5]
text-emphasis 文字強(qiáng)調(diào)
text-emphasis 意為文字強(qiáng)調(diào)，是 CSS Text Decoration Module Level 3[6] 才新增的一個(gè)屬性，用于增強(qiáng)文字強(qiáng)調(diào)的效果。
在早些時(shí)候，我們?nèi)绻獜?qiáng)調(diào)幾個(gè)字，可能更多是使用加粗，斜體這種較為常規(guī)的文字樣式類型：
- {
- font-weight: bold; // 加粗
- font-style: italic; // 斜體
- }
現(xiàn)在，多了一種有意思的強(qiáng)調(diào)方式 -- text-emphasis。
text-emphasis 語法
text-emphasis 包含了 text-emphasis 和 text-emphasis-position，允許我們在文字上方或者下方添加不同的強(qiáng)調(diào)裝飾以及不同的顏色。
看個(gè)簡單的 Demo：
- <p>
- This is <span>Text-emphasis</span>.
- </p>
- p span{
- text-emphasis: circle;
- }
text-emphasis: circle 的效果是給包裹的文字，在其上方，添加 circle 圖形，也就是圓圈圖形，效果如下：
image
當(dāng)然，默認(rèn)是黑色的，我們可以在 circle 后面補(bǔ)充顏色：
- p span{
- text-emphasis: circle #f00;
- }
image
除了 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: '😋';
- }
image
text-emphasis-position 語法
除了在文字上方，還可以在一定范圍內(nèi)改變強(qiáng)調(diào)圖形的位置，選擇放置在文字的上方或者下方，利用 text-emphasis-position。
這個(gè)屬性接受上下與左右兩個(gè)參數(shù)：
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;
- }
當(dāng)文字的排版的書寫順序是水平排版布局，類似 writing-mode: lr 時(shí)，只需要用到 over、under 即可，當(dāng)文本的排版布局模式是垂直模式時(shí)，類似 writing-mode: vertical-lr，才會用到 right 或者 left 關(guān)鍵字。
- 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;
- }
image
使用 background 模擬下劃線
除了 CSS 原生提供的 text-decoration 與 text-emphasis 之外，我們還可以通過其他元素模擬一些文字裝飾效果。
最常見的莫過于使用 background 模擬下劃線了。
看個(gè)簡單的 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 模擬下劃線與虛線下劃線[7]
當(dāng)然這個(gè)是最基礎(chǔ)的，巧妙的運(yùn)用 background 的各種屬性，我們實(shí)現(xiàn)各種有意思的效果。
巧妙改變 background-size 與 background-position 實(shí)現(xiàn)文字 hover 動效
這里，通過巧妙改變 background-size 與 background-position 屬性，我們可以實(shí)現(xiàn)一些非常有意思的文字 hover 效果。
先看這樣一個(gè) Demo，核心代碼作用于被<p>標(biāo)簽包裹的<a> 標(biāo)簽之上：
- <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;
- }
我們雖然，設(shè)定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff)，但是一開始默認(rèn)它的 background-size: 0 3px，也就是一開始是看不到下劃線的，當(dāng) hover 的時(shí)候，改變 background-size: 100% 3px，這個(gè)時(shí)候，就會有一個(gè) 0 3px 到 100% 3px 的變換，也就是一個(gè)從無到有的伸展效果。
看看最后的效果：
由于設(shè)定的 background-position 是 0 100%，如果，設(shè)定的 background-position 是 100% 100%，我們可以得到一個(gè)反向的效果：
- // 其他都保持一致，只改變 background-position，從 0 100% 改為 100% 100%
- a {
- ...
- background-position: 100% 100%;
- ...
- }
再看看效果，你可以對比著上面的動圖看看具體的差異點(diǎn)在哪：
CodePen Demo -- background underline animation[8]
OK，如果我們使用 background 實(shí)現(xiàn)兩條重疊的下劃線，再利用上述的兩個(gè)不同的 background-position 值，我們就可以得到一個(gè)更有意思的下劃線 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;
- }
可以得到這樣一種效果，其實(shí)每次 hover， 都有兩條下劃線在移動：
CodePen Demo -- background underline animation[9]
最后
好了，本文到此結(jié)束，介紹了關(guān)于文字裝飾的一些有意思的屬性及動效，希望對你有幫助 :)
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[10] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
參考資料
[1]CSS Level 2 (Revision 1) -- text-decoration: https://www.w3.org/TR/CSS2/text.html#lining-striking-props
[2]CSS Text Decoration Module Level 3 - text-decoration: https://drafts.csswg.org/css-text-decor-3/#text-decoration-property
[3]CodePen Demo -- Text-decoration Demo: https://codepen.io/Chokcoco/pen/VwmEpqj
[4]CodePen Demo -- 文字下劃線過渡動畫效果: https://codepen.io/Chokcoco/pen/jOymJZR
[5]CodePen Demo -- text-decoration Demo: https://codepen.io/Chokcoco/pen/poNQBye
[6]CSS Text Decoration Module Level 3: https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property
[7]CodePen Demo -- 使用 background 模擬下劃線與虛線下劃線: https://codepen.io/Chokcoco/pen/YzNQKwm
[8]CodePen Demo -- background underline animation: https://codepen.io/Chokcoco/pen/QWdgLwp
[9]CodePen Demo -- background underline animation: https://codepen.io/Chokcoco/pen/MWJogjQ
[10]Github -- iCSS: https://github.com/chokcoco/iCSS
