本博客介绍了如下内容：
1、伪元素的特征；
2、如果不通过伪元素，普通小白画八卦图方法；
3、如何通过伪元素装逼方法来画八卦图方法；
4、介绍了渐变色的生成工具和动画生成工具；
5、伪元素的注意问题。
6、还有其他，留给未来忘记这部分的自己和你看的。
伪类和伪元素developer.mozilla.org
哪些元素有伪元素：只要是非空的元素都有伪元素，如果是空元素就没有伪元素。
比较通俗的特征：
1、前面有两个冒号，比如::after或者::before，如果只有一个冒号就是伪类；
2、通常会配合content属性来为该元素添加装饰内容；
3、这个虚拟元素默认是行内元素，但是可以设置display。
4、在浏览器的输出效果上无法选中。
1、不用伪元素的情况来画一个阴阳图：
画一个圆
然后在画阴阳的黑白颜色，这里可以通过两个div来写，也可以借助工具更快。就用下面的颜色生成器工具就行了。
Ultimate CSS Gradient Generator from ColorZillawww.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静态图这里结束。
然后加一点旋转动画效果。
animationdeveloper.mozilla.org
查询MDN可以直接看代码拷贝过来就行了。
增加一个关键帧@keyframes。
把margin-left和width修改为旋转的效果，transform。然后找到一个次数。
设置animation-iteration-count:infinite;就可以无限次数重复。
看看动画效果：
继续找匀速设置动画
增加animation-timing-function：linear;为线性匀速。
看看增加匀速后的动画效果：
当然不查MDN通过工具也是可以达到动画效果的。
下面链接就是动画的CSS工具哦：
CSS3 Keyframes Animation Generatorcssanimate.com这里可以设置各种参数：
如果就想普通的无限次数均速旋转，转一次4秒就这样设置。
工具在线动画生成效果：
复制代码到需要用的css中，然后html中需要增加一个类名：
使用工具生成的代码复制到CSS中，在html中增加类名
再来看看效果吧：
八卦图或者其他形状的源代码可以在这里查询，有各种形状的源代码资源：
bomber：用CSS做三角形zhuanlan.zhihu.comanimation也有简写：
animationdeveloper.mozilla.org
本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
