本博客介紹了如下內容：

1、偽元素的特征；

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

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

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

5、偽元素的注意問題。

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

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

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

比較通俗的特征：

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

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

3、這個虛擬元素默認是行內元素，但是可以設置display。

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

---

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

畫一個圓

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

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

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

復制代碼到CSS后，顯示的效果。

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

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

然后調整位置，可以通過margin、padding調整。

也可以通過top、bottom、left、right根據定位的父級元素來調整，使用top、bottom、left、right的前提是必須設置了position不為static的前提，默認position就是static。

比如直接使用top來調整，或者使用position:static；也就是默認下用top、bottom、left、right是不可以的，比如設置為position:static;沒有任何反應。

默認情況也是沒有任何反應。

設置position為別的屬性，比如absolute就可以產生效果。

這樣就明白如何調整位置了，通過調整之后顯示兩個小圓。

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

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

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

普通的畫八卦圖結束啦。

---

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

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

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

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

為什么沒有效果呈現呢？

1、因為偽元素::before和::after必須要加上content才可以顯示，如果沒有內容也必須設置一個空的，比如content:'';

增加了還是沒有反應，還得滿足一個條件。

2、::before和::after本身是內聯的偽元素，前面說到過。

display: block;設置后就顯示出來了。

此時因為把絕對定位注釋了，所以位置偏了。

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

此時因為把絕對定位注釋了，所以位置偏了。

兩個條件滿足就可以顯示出來。

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

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

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

這個原因就是如果設置了display為非static的前提下，因為static是默認的。

比如設置了絕對定位display:absolute;這樣內聯元素會自動變成塊級元素。

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

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

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

里面的小圓介紹兩種方法來調整出來。

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

復制代碼到偽元素之后顯示效果。

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

復制漸變的代碼到before里面后，效果還不錯哦。

小圓用漸變工具到這里結束。

---

第二個方法就是可以用border，并且設置box-sizing:border-box;，把border的邊框設置粗一點就OK啦。

因為設置了box-sizing:border-box;所以呢，設置了寬度就會自動調整內部大小，如果是content-box就需要自己手動調整哦。

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

第三個方法就是還是用border，但是不設置box-sizing:border-box，或者設置為默認的content-box。

如果不使用box-sizing:border-box，默認就是content-box。就需要調整寬高為20px×20px。

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

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

靜態圖這里結束。

---

然后加一點旋轉動畫效果。

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

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

增加一個關鍵幀@keyframes。

把margin-left和width修改為旋轉的效果，transform。然后找到一個次數。

設置animation-iteration-count:infinite;就可以無限次數重復。

看看動畫效果：

非勻速旋轉八卦圖https://www.zhihu.com/video/1069344384646094848

繼續找勻速設置動畫

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

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

勻速旋轉八卦圖https://www.zhihu.com/video/1069344458251825152

---

當然不查MDN通過工具也是可以達到動畫效果的。

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

CSS3 Keyframes Animation Generator?cssanimate.com

這里可以設置各種參數：

如果就想普通的無限次數均速旋轉，轉一次4秒就這樣設置。

工具在線動畫生成效果：

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

復制代碼到需要用的css中，然后html中需要增加一個類名：

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

再來看看效果吧：

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

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

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

animation也有簡寫：

animation?developer.mozilla.org

本文為本人的原創文章，著作權歸本人和饑人谷所有，轉載務必注明來源

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。