日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁(yè) > 科技  > 軟件

太強(qiáng)了!CSS 文字效果還能這樣玩

來(lái)源: 責(zé)編: 時(shí)間:2024-02-01 12:51:37 212觀看
導(dǎo)讀在 CSS 中,文字算是我們天天會(huì)打交道的一大類了,有了文字,則必不可少一些文字裝飾。本文將講講兩個(gè)比較新的文字裝飾的概念 text-decoration 與 text-emphasis,在最后,還會(huì)講解使用 background 模擬文字下劃線的一些有趣的

sfO28資訊網(wǎng)——每日最新資訊28at.com

在 CSS 中,文字算是我們天天會(huì)打交道的一大類了,有了文字,則必不可少一些文字裝飾。sfO28資訊網(wǎng)——每日最新資訊28at.com

本文將講講兩個(gè)比較新的文字裝飾的概念 text-decoration 與 text-emphasis,在最后,還會(huì)講解使用 background 模擬文字下劃線的一些有趣的動(dòng)效。sfO28資訊網(wǎng)——每日最新資訊28at.com

text-decoration 文字裝飾

text-decoration 意為文字裝飾,在很早的規(guī)范 CSS Level 2 (Revision 1) -- text-decoration[1] 就已經(jīng)存在了。譬如我們非常熟知的下劃線 text-decoration: underline。sfO28資訊網(wǎng)——每日最新資訊28at.com

p {    text-decoration: underline;}

sfO28資訊網(wǎng)——每日最新資訊28at.com

而到了比較新的 CSS Text Decoration Module Level 3 - text-decoration[2],text-decoration 得到了比較大的豐富更新,演化出了:sfO28資訊網(wǎng)——每日最新資訊28at.com

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • 和還未成為標(biāo)準(zhǔn)的 text-decoration-thickness 等屬性。

如今,text-decoration 是上述 4 個(gè)屬性的的縮寫(xiě)。sfO28資訊網(wǎng)——每日最新資訊28at.com

其中:sfO28資訊網(wǎng)——每日最新資訊28at.com

  • 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ì)

這里有張非常好的圖,幫助大家快速理解:sfO28資訊網(wǎng)——每日最新資訊28at.com

sfO28資訊網(wǎng)——每日最新資訊28at.com

CodePen Demo -- Text-decoration Demo[3]sfO28資訊網(wǎng)——每日最新資訊28at.com

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

有意思的一點(diǎn)是,text-decoration-line 可以同時(shí)設(shè)置。sfO28資訊網(wǎng)——每日最新資訊28at.com

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

sfO28資訊網(wǎng)——每日最新資訊28at.com

我們可以得到上中下三條線。sfO28資訊網(wǎng)——每日最新資訊28at.com

text-decoration 可以進(jìn)行過(guò)渡與動(dòng)畫(huà)

text-decoration 的每個(gè)值都是可以進(jìn)行過(guò)渡與動(dòng)畫(huà)的。合理利用,在一些文本強(qiáng)調(diào)的地方,非常有用。sfO28資訊網(wǎng)——每日最新資訊28at.com

<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;    }}

sfO28資訊網(wǎng)——每日最新資訊28at.com

配合另外一個(gè)屬性 text-underline-offset,我們還可以實(shí)現(xiàn)如下圖這樣有趣的效果:sfO28資訊網(wǎng)——每日最新資訊28at.com

sfO28資訊網(wǎng)——每日最新資訊28at.com

當(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  的用法。sfO28資訊網(wǎng)——每日最新資訊28at.com

CodePen Demo -- 文字下劃線過(guò)渡動(dòng)畫(huà)效果[4]sfO28資訊網(wǎng)——每日最新資訊28at.com

text-decoration-color 與 color 分離

text-decoration-color 與 color 是可以不一樣的,類似于這樣。sfO28資訊網(wǎng)——每日最新資訊28at.com

.color {    text-decoration-style: wavy;    cursor: pointer;    transition: .5s;    &:hover {        color: transparent;        text-decoration-color: pink;    }}

sfO28資訊網(wǎng)——每日最新資訊28at.com

有意思,經(jīng)過(guò)這樣,我們其實(shí)得到了一條波浪線。sfO28資訊網(wǎng)——每日最新資訊28at.com

如果我們把 wavy 下劃線加給元素的偽元素,然后在 hover 的時(shí)候添加一個(gè)動(dòng)畫(huà),讓波浪線動(dòng)起來(lái),得到一個(gè)非常好的強(qiáng)調(diào) hover 效果:sfO28資訊網(wǎng)——每日最新資訊28at.com

<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);    }}

sfO28資訊網(wǎng)——每日最新資訊28at.com

我們利用偽元素添加了一段長(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)的波浪線的效果。sfO28資訊網(wǎng)——每日最新資訊28at.com

CodePen Demo -- text-decoration Demo[5]sfO28資訊網(wǎng)——每日最新資訊28at.com

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)的效果。sfO28資訊網(wǎng)——每日最新資訊28at.com

在早些時(shí)候,我們?nèi)绻獜?qiáng)調(diào)幾個(gè)字,可能更多是使用加粗,斜體這種較為常規(guī)的文字樣式類型:sfO28資訊網(wǎng)——每日最新資訊28at.com

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

現(xiàn)在,多了一種有意思的強(qiáng)調(diào)方式 -- text-emphasis。sfO28資訊網(wǎng)——每日最新資訊28at.com

text-emphasis 語(yǔ)法

text-emphasis 包含了 text-emphasis 和 text-emphasis-position,允許我們?cè)谖淖稚戏交蛘呦路教砑硬煌膹?qiáng)調(diào)裝飾以及不同的顏色。sfO28資訊網(wǎng)——每日最新資訊28at.com

看個(gè)簡(jiǎn)單的 Demo:sfO28資訊網(wǎng)——每日最新資訊28at.com

<p>   This is <span>Text-emphasis</span>.</p>
p span{    text-emphasis: circle;}

text-emphasis: circle 的效果是給包裹的文字,在其上方,添加 circle 圖形,也就是圓圈圖形,效果如下:sfO28資訊網(wǎng)——每日最新資訊28at.com

sfO28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然,默認(rèn)是黑色的,我們可以在 circle 后面補(bǔ)充顏色:sfO28資訊網(wǎng)——每日最新資訊28at.com

p span{    text-emphasis: circle #f00;}

sfO28資訊網(wǎng)——每日最新資訊28at.com

除了 circle,還提供非常多種圖形可以選擇,也可以自定義傳入字符,甚至是 emoji 表情:sfO28資訊網(wǎng)——每日最新資訊28at.com

<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

上一篇: 一篇文章,徹底理解數(shù)據(jù)庫(kù)操作語(yǔ)言:DDL、DML、DCL、TCL

下一篇: Kubernetes Informer基本原理,你明白了嗎?

標(biāo)簽:
  • 熱門(mén)焦點(diǎn)
Top 主站蜘蛛池模板: 吴旗县| 福州市| 漠河县| 和政县| 吴旗县| 新源县| 阳泉市| 贵德县| 陆良县| 沂水县| 康乐县| 西丰县| 眉山市| 定襄县| 丹江口市| 托克托县| 盐池县| 福清市| 四会市| 左贡县| 乐东| 东港市| 洞头县| 于都县| 柳州市| 灵山县| 利辛县| 辽阳县| 尼木县| 石棉县| 永新县| 涿州市| 深州市| 长白| 阳春市| 中牟县| 新宾| 连城县| 灵武市| 昌江| 苏尼特右旗|