日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
有意思！CSS文字裝飾還能這樣玩~

在 CSS 中，文字算是我們天天會打交道的一大類了，有了文字，則必不可少一些文字裝飾。

為耿馬等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及耿馬網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、耿馬網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

本文將講講兩個比較新的文字裝飾的概念 text-decoration 與 text-emphasis，在最后，還會講解使用 background 模擬文字下劃線的一些有趣的動效。

text-decoration 文字裝飾

text-decoration 意為文字裝飾，在很早的規(guī)范CSS Level 2 (Revision 1) -- text-decoration[1]就已經(jīng)存在了。譬如我們非常熟知的下劃線 text-decoration: underline。

 
 
 
 
    
  
  
  
  
  1. p {
    2. 
  
  
  
  
  2.     text-decoration: underline;
    3. 
  
  
  
  
  3. }
    4.

image

而到了比較新的CSS Text Decoration Module Level 3 - text-decoration[2]，text-decoration 得到了比較大的豐富更新，演化出了：

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • 和還未成為標準的 text-decoration-thickness 等屬性。

如今，text-decoration 是上述 4 個屬性的的縮寫。

其中：

  • text-decoration-line：控制用于設(shè)置元素中的文本的修飾類型，是在文本下方、上方還是貫穿文本
  • text-decoration-style：不僅僅是實線 solid，類似于 border-style，還支持雙實線 double、點劃線 dotted、虛線 dashed 以及非常有意思的 wavy 波浪線
  • text-decoration-color：這個好理解，控制顏色
  • text-decoration-thickness：控制修飾線的粗細

這里有張非常好的圖，幫助大家快速理解：

image

CodePen Demo -- Text-decoration Demo[3]

text-decoration-line 可以同時設(shè)置

有意思的一點是，text-decoration-line 可以同時設(shè)置。

 
 
 
 
    
  
  
  
  
  1. p {
    2. 
  
  
  
  
  2.     text-decoration-line: overline underline line-through;
    3. 
  
  
  
  
  3. }
    4.

image

我們可以得到上中下三條線。

text-decoration 可以進行過渡與動畫

text-decoration 的每個值都是可以進行過渡與動畫的。合理利用，在一些文本強調(diào)的地方，非常有用。

 
 
 
 
    
  
  
  
  
  1. Lorem ipsum dolor
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. .transition {
    2. 
  
  
  
  
  2.     text-decoration-line: underline;
    3. 
  
  
  
  
  3.     text-decoration-color: transparent;
    4. 
  
  
  
  
  4.     text-decoration-thickness: 0.1em;
    5. 
  
  
  
  
  5.     cursor: pointer;
    6. 
  
  
  
  
  6.     transition: .5s;
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.     &:hover {
    9. 
  
  
  
  
  9.         text-decoration-color: pink;
    10. 
  
  
  
  
  10.         text-decoration-thickness: 0.15em;
    11. 
  
  
  
  
  11.         color: pink;
    12. 
  
  
  
  
  12.     }
    13. 
  
  
  
  
  13. }
    14.

配合另外一個屬性 text-underline-offset，我們還可以實現(xiàn)如下圖這樣有趣的效果：

當然，上述的例子中使用了 text-underline-offset 的變換，但是本身 CSS 是不支持 text-underline-offset 的過渡動畫的，這里借助了 CSS @property 巧妙的實現(xiàn)了 text-underline-offset 的過渡動畫，感興趣的可以具體了解下 CSS @property 的用法。

CodePen Demo -- 文字下劃線過渡動畫效果[4]

text-decoration-color 與 color 分離

text-decoration-color 與 color 是可以不一樣的，類似于這樣。

 
 
 
 
    
  
  
  
  
  1. .color {
    2. 
  
  
  
  
  2.     text-decoration-style: wavy;
    3. 
  
  
  
  
  3.     cursor: pointer;
    4. 
  
  
  
  
  4.     transition: .5s;
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.     &:hover {
    7. 
  
  
  
  
  7.         color: transparent;
    8. 
  
  
  
  
  8.         text-decoration-color: pink;
    9. 
  
  
  
  
  9.     }
    10. 
  
  
  
  
  10. }
    11.

有意思，經(jīng)過這樣，我們其實得到了一條波浪線。

如果我們把 wavy 下劃線加給元素的偽元素，然后在 hover 的時候添加一個動畫，讓波浪線動起來，得到一個非常好的強調(diào) hover 效果：

 
 
 
 
    
  
  
  
  
  1. Lorem ibsum dolor
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. .animation {
    2. 
  
  
  
  
  2.     position: relative;
    3. 
  
  
  
  
  3.     text-decoration: none;
    4. 
  
  
  
  
  4.     overflow: hidden;
    5. 
  
  
  
  
  5.     cursor: pointer;
    6. 
  
  
  
  
  6.     line-height: 2;
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.     &::before {
    9. 
  
  
  
  
  9.         content: attr(data-content);
    10. 
  
  
  
  
  10.         position: absolute;
    11. 
  
  
  
  
  11.         top: 0;
    12. 
  
  
  
  
  12.         left: 0;
    13. 
  
  
  
  
  13.         color: transparent;
    14. 
  
  
  
  
  14.         white-space: nowrap;
    15. 
  
  
  
  
  15.         text-decoration-line: underline;
    16. 
  
  
  
  
  16.         text-decoration-style: wavy;
    17. 
  
  
  
  
  17.         text-decoration-color: #000;
    18. 
  
  
  
  
  18.         z-index: -1;
    19. 
  
  
  
  
  19.     }
    20. 
  
  
  
  
  20.     &:hover::before {
    21. 
  
  
  
  
  21.         animation: move 3s infinite linear;
    22. 
  
  
  
  
  22.     }
    23. 
  
  
  
  
  23. }
    24. 
  
  
  
  
  24. @keyframes move {
    25. 
  
  
  
  
  25.     100% {
    26. 
  
  
  
  
  26.         transform: translate(-209px, 0);
    27. 
  
  
  
  
  27.     }
    28. 
  
  
  
  
  28. }
    29.

我們利用偽元素添加了一段長于文本本身的文本，并且顏色為透明，但是設(shè)置了波浪線的顏色，然后 hover 的時候，通過運動偽元素的 translate 進行波浪線的位移，稍微調(diào)試一下 translate 的值，可以做到動畫的首尾相連，實現(xiàn)運動的波浪線的效果。

CodePen Demo -- text-decoration Demo[5]

text-emphasis 文字強調(diào)

text-emphasis 意為文字強調(diào)，是CSS Text Decoration Module Level 3[6]才新增的一個屬性，用于增強文字強調(diào)的效果。

在早些時候，我們?nèi)绻獜娬{(diào)幾個字，可能更多是使用加粗，斜體這種較為常規(guī)的文字樣式類型：

 
 
 
 
    
  
  
  
  
  1. {
    2. 
  
  
  
  
  2.     font-weight: bold;   // 加粗
    3. 
  
  
  
  
  3.     font-style: italic;  // 斜體
    4. 
  
  
  
  
  4. }
    5.

現(xiàn)在，多了一種有意思的強調(diào)方式 -- text-emphasis。

text-emphasis 語法

text-emphasis 包含了 text-emphasis 和 text-emphasis-position，允許我們在文字上方或者下方添加不同的強調(diào)裝飾以及不同的顏色。

看個簡單的 Demo：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.    This is Text-emphasis.
    3. 
  
  
  
  
    4. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1. p span{
    2. 
  
  
  
  
  2.     text-emphasis: circle;
    3. 
  
  
  
  
  3. }
    4.

text-emphasis: circle 的效果是給包裹的文字，在其上方，添加 circle 圖形，也就是圓圈圖形，效果如下：

image

當然，默認是黑色的，我們可以在 circle 后面補充顏色：

 
 
 
 
    
  
  
  
  
  1. p span{
    2. 
  
  
  
  
  2.     text-emphasis: circle #f00;
    3. 
  
  
  
  
  3. }
    4.

image

除了 circle，還提供非常多種圖形可以選擇，也可以自定義傳入字符，甚至是 emoji 表情：

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

image

text-emphasis-position 語法

除了在文字上方，還可以在一定范圍內(nèi)改變強調(diào)圖形的位置，選擇放置在文字的上方或者下方，利用 text-emphasis-position。

這個屬性接受上下與左右兩個參數(shù)：

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

 
 
 
 
    
  
  
  
  
  1. .keyword {
    2. 
  
  
  
  
  2.     text-emphasis: circle #f00;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. .word {
    5. 
  
  
  
  
  5.     text-emphasis: 'x' blue;
    6. 
  
  
  
  
  6.     text-position: over left;
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. .emoji {
    9. 
  
  
  
  
  9.     text-emphasis: '';
    10. 
  
  
  
  
  10.     text-position: under left;
    11. 
  
  
  
  
  11. }
    12.

當文字的排版的書寫順序是水平排版布局，類似 writing-mode: lr 時，只需要用到 over、under 即可，當文本的排版布局模式是垂直模式時，類似 writing-mode: vertical-lr，才會用到 right 或者 left 關(guān)鍵字。

 
 
 
 
    
  
  
  
  
  1. p {
    2. 
  
  
  
  
  2.     writing-mode: vertical-rl;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. .keyword {
    5. 
  
  
  
  
  5.     text-emphasis: circle #f00;
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7. .word {
    8. 
  
  
  
  
  8.     text-emphasis: 'x' blue;
    9. 
  
  
  
  
  9.     text-position: over left;
    10. 
  
  
  
  
  10. }
    11. 
  
  
  
  
  11. .emoji {
    12. 
  
  
  
  
  12.     text-emphasis: '';
    13. 
  
  
  
  
  13.     text-position: under right;
    14. 
  
  
  
  
  14. }
    15.

image

使用 background 模擬下劃線

除了 CSS 原生提供的 text-decoration 與 text-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.
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. p {
    2. 
  
  
  
  
  2.     width: 600px;
    3. 
  
  
  
  
  3.     font-size: 24px;
    4. 
  
  
  
  
  4.     color: #666;
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. a {
    7. 
  
  
  
  
  7.     background: linear-gradient(90deg, #0cc, #0cc);
    8. 
  
  
  
  
  8.     background-size: 100% 3px;
    9. 
  
  
  
  
  9.     background-repeat: no-repeat;
    10. 
  
  
  
  
  10.     background-position: 100% 100%;
    11. 
  
  
  
  
  11.     color: #0cc;
    12. 
  
  
  
  
  12. }
    13.

使用 background 模擬文字的下劃線效果，效果圖如下：

又或者，使用 background 模擬虛線下劃線：

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

CodePen Demo -- 使用 background 模擬下劃線與虛線下劃線[7]

當然這個是最基礎(chǔ)的，巧妙的運用 background 的各種屬性，我們實現(xiàn)各種有意思的效果。

巧妙改變 background-size 與 background-position 實現(xiàn)文字 hover 動效

這里，通過巧妙改變 background-size 與 background-position 屬性，我們可以實現(xiàn)一些非常有意思的文字 hover 效果。

先看這樣一個 Demo，核心代碼作用于被

標簽包裹的 標簽之上：

 
 
 
 
    
  
  
  
  
  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.
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. a {
    2. 
  
  
  
  
  2.     background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    3. 
  
  
  
  
  3.     background-size: 0 3px;
    4. 
  
  
  
  
  4.     background-repeat: no-repeat;
    5. 
  
  
  
  
  5.     background-position: 0 100%;
    6. 
  
  
  
  
  6.     transition: 1s all;
    7. 
  
  
  
  
  7.     color: #0cc;
    8. 
  
  
  
  
  8. }
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. a:hover {
    11. 
  
  
  
  
  11.     background-size: 100% 3px;
    12. 
  
  
  
  
  12.     color: #000;
    13. 
  
  
  
  
  13. }
    14.

我們雖然，設(shè)定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff)，但是一開始默認它的 background-size: 0 3px，也就是一開始是看不到下劃線的，當 hover 的時候，改變 background-size: 100% 3px，這個時候，就會有一個 0 3px 到 100% 3px 的變換，也就是一個從無到有的伸展效果。

看看最后的效果：

由于設(shè)定的 background-position 是 0 100%，如果，設(shè)定的 background-position 是 100% 100%，我們可以得到一個反向的效果：

 
 
 
 
    
  
  
  
  
  1. // 其他都保持一致，只改變 background-position，從 0 100% 改為 100% 100%
    2. 
  
  
  
  
  2. a {
    3. 
  
  
  
  
  3.     ...
    4. 
  
  
  
  
  4.     background-position: 100% 100%;
    5. 
  
  
  
  
  5.     ...
    6. 
  
  
  
  
  6. }
    7.

再看看效果，你可以對比著上面的動圖看看具體的差異點在哪：

CodePen Demo -- background underline animation[8]

OK，如果我們使用 background 實現(xiàn)兩條重疊的下劃線，再利用上述的兩個不同的 background-position 值，我們就可以得到一個更有意思的下劃線 hover 效果。

CSS 代碼示意，注意看兩條使用 background 模擬的下劃線的 background-position 的值是不一樣的：

 
 
 
 
    
  
  
  
  
  1. a {
    2. 
  
  
  
  
  2.     background: 
    3. 
  
  
  
  
  3.         linear-gradient(90deg, #0cc, #0cc),
    4. 
  
  
  
  
  4.         linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    5. 
  
  
  
  
  5.     background-size: 100% 3px, 0 3px;
    6. 
  
  
  
  
  6.     background-repeat: no-repeat;
    7. 
  
  
  
  
  7.     background-position: 100% 100%, 0 100%;
    8. 
  
  
  
  
  8.     transition: 0.5s all;
    9. 
  
  
  
  
  9.     color: #0cc;
    10. 
  
  
  
  
  10. }
    11. 
  
  
  
  
  11. a:hover {
    12. 
  
  
  
  
  12.     background-size: 0 3px, 100% 3px;
    13. 
  
  
  
  
  13.     color: #000;
    14. 
  
  
  
  
  14. }
    15.

可以得到這樣一種效果，其實每次 hover， 都有兩條下劃線在移動：

CodePen Demo -- background underline animation[9]

最后

好了，本文到此結(jié)束，介紹了關(guān)于文字裝飾的一些有意思的屬性及動效，希望對你有幫助 ????

更多精彩 CSS 技術(shù)文章匯總在我的Github -- iCSS[10]，持續(xù)更新，歡迎點個 star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

參考資料
[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


網(wǎng)站題目：有意思！CSS文字裝飾還能這樣玩~
標題網(wǎng)址：http://www.dlmjj.cn/article/cceeheh.html