本博客介紹了如下內(nèi)容：

1、偽元素的特征；

2、如果不通過偽元素，普通小白畫八卦圖方法；

3、如何通過偽元素裝逼方法來畫八卦圖方法；

4、介紹了漸變色的生成工具和動畫生成工具；

5、偽元素的注意問題。

6、還有其他，留給未來忘記這部分的自己和你看的。

偽類和偽元素?developer.mozilla.org

哪些元素有偽元素：只要是非空的元素都有偽元素，如果是空元素就沒有偽元素。

比較通俗的特征：

1、前面有兩個(gè)冒號，比如::after或者::before，如果只有一個(gè)冒號就是偽類；

2、通常會配合content屬性來為該元素添加裝飾內(nèi)容；

3、這個(gè)虛擬元素默認(rèn)是行內(nèi)元素，但是可以設(shè)置display。

4、在瀏覽器的輸出效果上無法選中。

---

1、不用偽元素的情況來畫一個(gè)陰陽圖：

畫一個(gè)圓

然后在畫陰陽的黑白顏色，這里可以通過兩個(gè)div來寫，也可以借助工具更快。就用下面的顏色生成器工具就行了。

Ultimate CSS Gradient Generator from ColorZilla?www.colorzilla.com

八卦圖就簡單的設(shè)置兩種顏色，黑白。

復(fù)制代碼到CSS后，顯示的效果。

接下來在big類里面在設(shè)置兩個(gè)圓分別是small1和small2。

這兩個(gè)圓使用絕對定位，自身用position:absolute;父級big類用position:relative.

然后調(diào)整位置，可以通過margin、padding調(diào)整。

也可以通過top、bottom、left、right根據(jù)定位的父級元素來調(diào)整，使用top、bottom、left、right的前提是必須設(shè)置了position不為static的前提，默認(rèn)position就是static。

比如直接使用top來調(diào)整，或者使用position:static；也就是默認(rèn)下用top、bottom、left、right是不可以的，比如設(shè)置為position:static;沒有任何反應(yīng)。

默認(rèn)情況也是沒有任何反應(yīng)。

設(shè)置position為別的屬性，比如absolute就可以產(chǎn)生效果。

這樣就明白如何調(diào)整位置了，通過調(diào)整之后顯示兩個(gè)小圓。

刪除邊框，增加body背景方便看到八卦圖，增加兩個(gè)小圓的背景色。

同樣的，再增加DIV來畫兩個(gè)更小的圓。這個(gè)時(shí)候，position的父級已經(jīng)有position:absolute定位了，所以不用在設(shè)置position:relative，如沒有就必須要設(shè)置。

同樣調(diào)整寬高，上下左右的距離去掉邊框，增加背景顏色就出來啦。

普通的畫八卦圖結(jié)束啦。

---

2、咱們用偽元素在畫一遍。

偽元素的特征前面說過，這里根據(jù)代碼和圖形在來看一遍部分特征。

把內(nèi)部的四個(gè)DIV都刪除，直接注釋掉也OK，根據(jù)文檔流方向，之前的small1在small2前面。也就是small1是before，small2是after.

然后.small1修改為.big::before，.small2修改為.big::after。其他的可以保持不變。

為什么沒有效果呈現(xiàn)呢？

1、因?yàn)閭卧?:before和::after必須要加上content才可以顯示，如果沒有內(nèi)容也必須設(shè)置一個(gè)空的，比如content:'';

增加了還是沒有反應(yīng)，還得滿足一個(gè)條件。

2、::before和::after本身是內(nèi)聯(lián)的偽元素，前面說到過。

display: block;設(shè)置后就顯示出來了。

此時(shí)因?yàn)榘呀^對定位注釋了，所以位置偏了。

display: inline-block;設(shè)置后就顯示出來了。

此時(shí)因?yàn)榘呀^對定位注釋了，所以位置偏了。

兩個(gè)條件滿足就可以顯示出來。

為了滿足位置要求，我們把絕對定位不注釋。

并且取消掉display: inline-block和display: block;

結(jié)果還是會顯示，而且還滿足了位置要求。

這個(gè)原因就是如果設(shè)置了display為非static的前提下，因?yàn)閟tatic是默認(rèn)的。

比如設(shè)置了絕對定位display:absolute;這樣內(nèi)聯(lián)元素會自動變成塊級元素。

另外display:fixed也可以，其他的暫時(shí)沒有效果。

繼續(xù)完善，里面還有兩個(gè)小圓，下一個(gè)特征，::before里面還可以加子元素嗎，比如增加一個(gè)子元素::before。

::before里面增加一個(gè)子元素::before。設(shè)置content為1111,設(shè)置block，沒有任何效果。

里面的小圓介紹兩種方法來調(diào)整出來。

第一個(gè)方法使用前面說到的顏色漸變工具：

復(fù)制代碼到偽元素之后顯示效果。

同樣把before也使用漸變工具。只需要把兩邊的顏色調(diào)換就滿足了。

復(fù)制漸變的代碼到before里面后，效果還不錯(cuò)哦。

小圓用漸變工具到這里結(jié)束。

---

第二個(gè)方法就是可以用border，并且設(shè)置box-sizing:border-box;，把border的邊框設(shè)置粗一點(diǎn)就OK啦。

因?yàn)樵O(shè)置了box-sizing:border-box;所以呢，設(shè)置了寬度就會自動調(diào)整內(nèi)部大小，如果是content-box就需要自己手動調(diào)整哦。

邊框設(shè)置40px，里面的小圓就是100-40-40=20px啦。

第三個(gè)方法就是還是用border，但是不設(shè)置box-sizing:border-box，或者設(shè)置為默認(rèn)的content-box。

如果不使用box-sizing:border-box，默認(rèn)就是content-box。就需要調(diào)整寬高為20px×20px。

具體box-sizing:border-box和box-sizing:content-box區(qū)別見下面鏈接：

bomber：CSS中的content-box 與 border-box 的區(qū)別?zhuanlan.zhihu.com

靜態(tài)圖這里結(jié)束。

---

然后加一點(diǎn)旋轉(zhuǎn)動畫效果。

animation?developer.mozilla.org使用 CSS 動畫?developer.mozilla.org

查詢MDN可以直接看代碼拷貝過來就行了。

增加一個(gè)關(guān)鍵幀@keyframes。

把margin-left和width修改為旋轉(zhuǎn)的效果，transform。然后找到一個(gè)次數(shù)。

設(shè)置animation-iteration-count:infinite;就可以無限次數(shù)重復(fù)。

看看動畫效果：

非勻速旋轉(zhuǎn)八卦圖https://www.zhihu.com/video/1069344384646094848

繼續(xù)找勻速設(shè)置動畫

增加animation-timing-function：linear;為線性勻速。

看看增加勻速后的動畫效果：

勻速旋轉(zhuǎn)八卦圖https://www.zhihu.com/video/1069344458251825152

---

當(dāng)然不查MDN通過工具也是可以達(dá)到動畫效果的。

下面鏈接就是動畫的CSS工具哦：

CSS3 Keyframes Animation Generator?cssanimate.com

這里可以設(shè)置各種參數(shù)：

如果就想普通的無限次數(shù)均速旋轉(zhuǎn)，轉(zhuǎn)一次4秒就這樣設(shè)置。

工具在線動畫生成效果：

工具在線動畫生成效果https://www.zhihu.com/video/1069349830593265664

復(fù)制代碼到需要用的css中，然后html中需要增加一個(gè)類名：

使用工具生成的代碼復(fù)制到CSS中，在html中增加類名

再來看看效果吧：

使用工具生成的代碼動畫https://www.zhihu.com/video/1069350129030504448

八卦圖或者其他形狀的源代碼可以在這里查詢，有各種形狀的源代碼資源：

bomber：用CSS做三角形?zhuanlan.zhihu.com

animation也有簡寫：

animation?developer.mozilla.org

本文為本人的原創(chuàng)文章，著作權(quán)歸本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來源

總結(jié)

以上是生活随笔為你收集整理的伪元素写竖线_用伪元素画出太极图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。