伪元素写竖线_用伪元素画出太极图
本博客介紹了如下內容：
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.comanimation也有簡寫：
animation?developer.mozilla.org本文為本人的原創文章，著作權歸本人和饑人谷所有，轉載務必注明來源
總結
以上是生活随笔為你收集整理的伪元素写竖线_用伪元素画出太极图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： diy手工制作泡沫小球_废物利用手工DI
- 下一篇： 50兆 svg 文件超过_中山兆驰产业园