主頁 > 知識(shí)庫 > 詳解CSS偽元素的妙用單標(biāo)簽之美

詳解CSS偽元素的妙用單標(biāo)簽之美

熱門標(biāo)簽:常州電話外呼系統(tǒng)招商 上海400電話辦理到易號(hào)網(wǎng) 洛陽防封卡外呼系統(tǒng)廠家 申請(qǐng)400電話移動(dòng) 廣州防封電銷機(jī)器人廠家 山東電銷機(jī)器人軟件 南通電銷外呼系統(tǒng)軟件 智能語音電銷機(jī)器人客戶端 成都企業(yè)外呼系統(tǒng)

:before和::before的區(qū)別

在介紹具體用法之前,簡單介紹下偽類和偽元素。偽類大家聽的多了,偽元素可能聽到的不是那么頻繁,其實(shí) CSS 對(duì)這兩個(gè)是有區(qū)分的。

有時(shí)你會(huì)發(fā)現(xiàn)偽類元素使用了兩個(gè)冒號(hào) (::) 而不是一個(gè)冒號(hào) (:),這是 CSS3 規(guī)范中的一部分要求,目的是為了區(qū)分偽類和偽元素,大多數(shù)瀏覽器都支持這兩種表示方式。

#id:after{
 ...
}
#id::after{
 ...
}

單冒號(hào)(:)用于 CSS3 偽類,雙冒號(hào)(::)用于 CSS3 偽元素。對(duì)于 CSS2 中已經(jīng)有的偽元素,例如 :before,單冒號(hào)和雙冒號(hào)的寫法 ::before 作用是一樣的。

所以,如果你的網(wǎng)站只需要兼容 webkit、firefox、opera 等瀏覽器,建議對(duì)于偽元素采用雙冒號(hào)的寫法,如果不得不兼容 IE 瀏覽器,還是用 CSS2 的單冒號(hào)寫法比較安全。

更加具體的信息,可以看看 MDN 對(duì)偽類和偽元素的理解。

本文的主角就是偽元素 before 和 after ,下面將具體講講這兩個(gè)偽元素的魅力。

哪些標(biāo)簽不支持偽元素?

我也是才知道這個(gè)姿勢(shì)。為了不誤導(dǎo)讀者,就趕緊補(bǔ)充一下。

偽元素雖然強(qiáng)大,但是還是有一些特定的標(biāo)簽是不支持偽元素 before 和 after 的。

諸如 img> 、input>、iframe>,這幾個(gè)標(biāo)簽是不支持類似 img::before 這樣使用。

究其原因,要想要標(biāo)簽支持偽元素,需要這個(gè)元素是要可以插入內(nèi)容的,也就是說這個(gè)元素要是一個(gè)容器。而input,img,iframe 等元素都不能包含其他元素,所以不能通過偽元素插入內(nèi)容。

利用 after 清除浮動(dòng)

這個(gè)估計(jì)是前端都知道,運(yùn)用 after 偽元素清除頁面浮動(dòng),不做過多解釋。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

偽元素與css sprites 雪碧圖

這個(gè)也是老姿勢(shì)了。雪碧圖大家應(yīng)該也不陌生,通過將多個(gè)圖片 icon 合為一張圖,從而為了減少 http 請(qǐng)求,很多網(wǎng)站對(duì)雪碧圖的需求還是很大的。

但是在制作雪碧圖的過程中,或者現(xiàn)在很多的打包工具自動(dòng)生成的雪碧圖,都存在著需要為每個(gè) icon 需要預(yù)留多少邊距的問題。看看下圖:

譬如上面這種情況(假設(shè)按鈕中的圖標(biāo)是采用了雪碧圖),產(chǎn)品某天突然要求按鈕從狀態(tài)左變?yōu)闋顟B(tài)右,那么雪碧圖原先預(yù)留的位置邊距肯定就不夠了,導(dǎo)致其他圖形出現(xiàn)在按鈕中。

而我們通常不會(huì)為了一個(gè)小 icon 多添加一個(gè)標(biāo)簽(不符合語義化)。

所以通常這種情況需要用到雪碧圖的話,都是在按鈕中設(shè)置一個(gè)偽元素,將偽元素的高寬設(shè)置為原本 icon 的大小,再利用絕對(duì)定位定位到需要的地方,這樣無論雪碧圖每個(gè) icon 的邊距是多少,都能夠完美適應(yīng)。

單個(gè)顏色實(shí)現(xiàn)按鈕 hover 、active 的明暗變化

最近項(xiàng)目有個(gè)這樣的需求,根據(jù)不同的業(yè)務(wù)場景,運(yùn)營需要配置一個(gè)按鈕的不同背景色值。但是我們知道,一個(gè)按鈕通常而言是有 3 個(gè)色值的,normal 狀態(tài)的,hover 狀態(tài)的和 active 狀態(tài)的,通常 hover 是比原色稍微亮一點(diǎn),active 則是稍微暗一點(diǎn)。

大概是這樣(下圖):

為了減輕運(yùn)營同學(xué)的負(fù)擔(dān),怎么樣做到只配置一個(gè)背景色不配置 hover 和 active 顏色讓按鈕也能自適應(yīng)跟隨變化呢。是的,用上 before、after 兩個(gè)偽元素可以做到。

顏色小知識(shí)

這里要科普一下顏色值的小知識(shí)。我們熟知的顏色表示法除了 #fff ,rgb(255,255,255),還有 hsl(0, 100%, 100%)(HSV)。

以 HSL 為例,它是一種將RGB 色彩模型中的點(diǎn)在圓柱坐標(biāo)系中的表示法。HSL 即色相、飽和度、亮度(英語:Hue, Saturation, Lightness)。

對(duì)于一個(gè)使用 HSL 表示的顏色,我們只需要改變 L (亮度)的值,就可以得到一個(gè)更亮一點(diǎn)或者更暗一點(diǎn)的顏色。

當(dāng)然改變亮度,還可以通過疊加透明層實(shí)現(xiàn),這里使用偽元素改變按鈕背景色就是通過疊加半透明層實(shí)現(xiàn)。

簡單來說,在背景色上方疊加一個(gè)白色半透明層 rgba(255,255,255,.2) 可以得到一個(gè)更亮的顏色。(這句話不是很嚴(yán)謹(jǐn),假設(shè)一個(gè)元素背景是純白顏色,疊加白色半透明層也是不會(huì)更亮的)

反之,在背景色上方疊加一個(gè)黑色半透明層 rgba(0,0,0,.2) 可以得到一個(gè)更暗的顏色。

所以,我們用 before 偽元素生成一個(gè)與按鈕大小一致的黑色半透明層 rgba(0,0,0,.2),在 .btn:hover:before 時(shí)顯示,用 after 偽元素生成一個(gè)與按鈕大小一致的白色半透明層 rgba(255,255,255,.2),在 .btn:active:before 時(shí)顯示,就可以做到只配置一個(gè)背景底色,實(shí)現(xiàn)hover 、active 的時(shí)的明暗變化。

.pesudo:before{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
  content:"";
}
.pesudo:after{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(255,255,255,.2);
}
.pesudo:active:after{
  content:"";
}

變形恢復(fù)

有的時(shí)候,設(shè)計(jì)師們希望通過一些比較特殊的幾何圖形,表達(dá)不同的意思。

用 CSS3 transfrom 屬性,我們可以輕松的得到一個(gè)梯形,菱形或者平行四邊形。有時(shí)我們?cè)O(shè)計(jì)師們希望在這些容器內(nèi)配上文字,譬如平行四邊形可以表達(dá)一種速度之感。

但是如上圖所示,內(nèi)容文字也會(huì)跟著 CSS3 變換一起發(fā)生了扭曲,通常我們會(huì)用一個(gè) div 做背景進(jìn)行變換,而文字則是放在另外一個(gè) div 中。

但是運(yùn)用偽元素,我們可以去掉這些不合語義化多余的標(biāo)簽,運(yùn)用 before 偽元素,將 CSS3 變換作用于偽元素上,這樣變形不會(huì)作用于位于 div 上的的文字,而且沒有使用多余的標(biāo)簽。

偽元素實(shí)現(xiàn)換行,替代br換行標(biāo)簽

大家都知道,塊級(jí)元素在不脫離正常布局流的情況下是會(huì)自動(dòng)換行,而行級(jí)元素則不會(huì)自動(dòng)換行。但在項(xiàng)目中,有需求是需要讓行級(jí)元素也自動(dòng)換行的,通常這種情況,我都是用 br/> 換行標(biāo)簽解決。而 《CSS SECRET》 中對(duì) br /> 標(biāo)簽的描述是,這種方法不僅在可維護(hù)性方面是一種糟糕的實(shí)踐,而且污染了結(jié)構(gòu)層的代碼。想想自己敲代碼以來,用的 br/> 標(biāo)簽還真不少。

運(yùn)用 after 偽元素,可以有一種非常優(yōu)雅的解決方案:

.inline-element::after{
    content: "\A";
    white-space: pre;
}

通過給元素的 after 偽元素添加 content 為 "\A" 的值。這里 \A 是什么呢?

有一個(gè) Unicode字符是專門代表換行符的:0x000A。在CSS中,這個(gè)字符可以寫作"\000A",或簡化為"\A"。這里我們用它來作為::after 偽元素的內(nèi)容。也就是在元素末尾添加了一個(gè)換行符的意思。

而 white-space: pre; 的作用是保留元素后面的空白符和換行符,結(jié)合兩者,就可以輕松實(shí)現(xiàn)在行內(nèi)級(jí)元素末尾實(shí)現(xiàn)換行。

增強(qiáng)用戶體驗(yàn),使用偽元素實(shí)現(xiàn)增大點(diǎn)擊熱區(qū)

按鈕是我們網(wǎng)頁設(shè)計(jì)中十分重要的一環(huán),而按鈕的設(shè)計(jì)也與用戶體驗(yàn)息息相關(guān)。讓用戶更容易的點(diǎn)擊到按鈕無疑能很好的增加用戶體驗(yàn),尤其是在移動(dòng)端,按鈕通常都很小,但是有時(shí)由于設(shè)計(jì)稿限制,我們不能直接去改變按鈕元素的高寬。那么這個(gè)時(shí)候有什么辦法在不改變按鈕原本大小的情況下去增加他的點(diǎn)擊熱區(qū)呢?

這里,偽元素也是可以代表其宿主元素來響應(yīng)的鼠標(biāo)交互事件的。借助偽元素可以輕松幫我們實(shí)現(xiàn),我們可以這樣寫:

.btn::befoer{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}

當(dāng)然,在 PC 端下這樣子看起來有點(diǎn)奇怪,但是合理的用在點(diǎn)擊區(qū)域較小的移動(dòng)端則能取到十分好的效果,效果如下:

more magic -- 單標(biāo)簽圖案

上面介紹的是偽元素眾多用法的一部分,偽元素的作用遠(yuǎn)不止于此。有了before 、after 兩個(gè)偽元素。一個(gè)標(biāo)簽其實(shí)可以相當(dāng)于 3 個(gè)標(biāo)簽來使用,而配合 CSS3 強(qiáng)大的 3D 變換、多重背景,多重陰影等手段,讓單標(biāo)簽作畫成為了可能,下面是我僅用單個(gè)標(biāo)簽,實(shí)現(xiàn)的一些動(dòng)畫效果:

單標(biāo)簽實(shí)現(xiàn)瀏覽器圖標(biāo):

單標(biāo)簽天氣圖標(biāo):

以上就是詳解CSS偽元素的妙用單標(biāo)簽之美的詳細(xì)內(nèi)容,更多關(guān)于CSS偽元素的妙用單標(biāo)簽之美的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

您可能感興趣的文章:
  • Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼
  • jQuery修改CSS偽元素屬性的方法
  • django創(chuàng)建css文件夾的具體方法
  • Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場動(dòng)畫效果的代碼
  • Vue3新特性之在Composition API中使用CSS Modules
  • javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲
  • js+css實(shí)現(xiàn)全屏側(cè)邊欄
  • 詳解VScode自動(dòng)補(bǔ)全CSS3前綴插件以及配置無效的解決辦法
  • jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】

標(biāo)簽:鶴壁 滄州 廣安 貴州 賀州 萊蕪 邵陽 混顯

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《詳解CSS偽元素的妙用單標(biāo)簽之美》,本文關(guān)鍵詞  詳解,CSS,偽,元素,的,妙用,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳解CSS偽元素的妙用單標(biāo)簽之美》相關(guān)的同類信息!
  • 本頁收集關(guān)于詳解CSS偽元素的妙用單標(biāo)簽之美的相關(guān)信息資訊供網(wǎng)民參考!
  • 企业400电话

    智能AI客服机器人
    15000

    在线订购

    合计11份范本:公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推薦文章