鴻蒙OS 4.0公測(cè)機(jī)型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統(tǒng)將于今天下午正式登場(chǎng)，官方在發(fā)布會(huì)之前也已經(jīng)正式給出了可升級(jí)的機(jī)型產(chǎn)品，這意味著這些機(jī)型會(huì)率先支持升級(jí)享用。這次的HarmonyOS 4.0支持
在 CSS 中，文字算是我們天天會(huì)打交道的一大類了，有了文字，則必不可少一些文字裝飾。
本文將講講兩個(gè)比較新的文字裝飾的概念 text-decoration 與 text-emphasis，在最后，還會(huì)講解使用 background 模擬文字下劃線的一些有趣的動(dòng)效。
text-decoration 意為文字裝飾，在很早的規(guī)范 CSS Level 2 (Revision 1) -- text-decoration[1] 就已經(jīng)存在了。譬如我們非常熟知的下劃線 text-decoration: underline。
p { text-decoration: underline;}
而到了比較新的 CSS Text Decoration Module Level 3 - text-decoration[2]，text-decoration 得到了比較大的豐富更新，演化出了：
如今，text-decoration 是上述 4 個(gè)屬性的的縮寫(xiě)。
其中：
這里有張非常好的圖，幫助大家快速理解：
CodePen Demo -- Text-decoration Demo[3]
有意思的一點(diǎn)是，text-decoration-line 可以同時(shí)設(shè)置。
p { text-decoration-line: overline underline line-through;}
我們可以得到上中下三條線。
text-decoration 的每個(gè)值都是可以進(jìn)行過(guò)渡與動(dòng)畫(huà)的。合理利用，在一些文本強(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 的過(guò)渡動(dòng)畫(huà)的，這里借助了 CSS @property 巧妙的實(shí)現(xiàn)了 text-underline-offset 的過(guò)渡動(dòng)畫(huà)，感興趣的可以具體了解下 CSS @property 的用法。
CodePen Demo -- 文字下劃線過(guò)渡動(dòng)畫(huà)效果[4]
text-decoration-color 與 color 是可以不一樣的，類似于這樣。
.color { text-decoration-style: wavy; cursor: pointer; transition: .5s; &:hover { color: transparent; text-decoration-color: pink; }}
有意思，經(jīng)過(guò)這樣，我們其實(shí)得到了一條波浪線。
如果我們把 wavy 下劃線加給元素的偽元素，然后在 hover 的時(shí)候添加一個(gè)動(dòng)畫(huà)，讓波浪線動(dòng)起來(lái)，得到一個(gè)非常好的強(qiáng)調(diào) hover 效果：
<p class="animation" data-cnotallow="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); }}
我們利用偽元素添加了一段長(zhǎng)于文本本身的文本，并且顏色為透明，但是設(shè)置了波浪線的顏色，然后 hover 的時(shí)候，通過(guò)運(yùn)動(dòng)偽元素的 translate 進(jìn)行波浪線的位移，稍微調(diào)試一下 translate 的值，可以做到動(dòng)畫(huà)的首尾相連，實(shí)現(xiàn)運(yùn)動(dòng)的波浪線的效果。
CodePen Demo -- text-decoration Demo[5]
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-position，允許我們?cè)谖淖稚戏交蛘呦路教砑硬煌膹?qiáng)調(diào)裝飾以及不同的顏色。
看個(gè)簡(jiǎn)單的 Demo：
<p> This is <span>Text-emphasis</span>.</p>p span{ text-emphasis: circle;}text-emphasis: circle 的效果是給包裹的文字，在其上方，添加 circle 圖形，也就是圓圈圖形，效果如下：
當(dāng)然，默認(rèn)是黑色的，我們可以在 circle 后面補(bǔ)充顏色：
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: '
本文鏈接：http://www.www897cc.com/showinfo-26-70457-0.html太強(qiáng)了！CSS 文字效果還能這樣玩
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)