TEST | 通过伪元素做一张太极图

之前我们通过CSS定位完成了一张太极图https://blog.csdn.net/r_banyan0820/article/details/81086026

现在我们通过伪元素来完成同样效果

一、明确伪类与伪元素定义

1.伪类：用于向某些选择器添加特殊的效果，根据其当前状态修改它进入另一状态的效果，比较动态。同理，当元素失去当前状态，也就失去了添加的效果。CSS中常见伪类：

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

在CSS3中，伪类有了更多应用，可以利用dom树进行元素选择，CSS3新添：

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child() 选择某个元素的一个或多个特定的子元素；

:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type() 选择指定的元素；

:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；

:first-of-type 选择一个上级元素下的第一个同类子元素；

:last-of-type 选择一个上级元素的最后一个同类子元素；

:only-child 选择的元素是它的父元素的唯一一个子元素；

:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty 选择的元素里面没有任何内容。

2.伪元素：用于将特殊的效果添加到某些选择器，为了补充普通选择器无法做到的，伪元素在DOM树之外，不能使用id、class进行补充修改，伪元素选择器：

:first-letter 选择元素文本的第一个字（母）。

:first-line 选择元素文本的第一行。

:before 在元素内容的最前面添加新内容。

:after 在元素内容的最后面添加新内容。

3.在CSS3中，单冒号(:)用于伪类，双冒号(::)用于伪元素。::before、::after在CSS2中写作:before、:after,所以现在对于CSS2中已有的伪元素双冒号单冒号都可以。

附上一个其他博主对伪元素及伪类说明很详细的文章https://segmentfault.com/a/1190000012156828

二、代码部分

1.建一个背景使用渐变黑白的div，渐变使用这个网站http://www.colorzilla.com/gradient-editor/

<div id="yinyang"></div>

body {background-color: grey;}    
#yinyang {
                width: 300px;
                height: 300px;
                border-radius: 50%;
                background-color: #fff;
                position: absolute;
                top: 28%;
                left: 40%;
                background: linear-gradient(to bottom, #ffffff 0%, #ffffff 46%, #000000 46%, #000000 100%);            
            }//不同的线性方向有to top/left/right/bottom

2.运用::after、::before完成太极的其他部分

切记千万不要忘记加content属性，可以给空值。可以调整border大小控制整个圆和圆心大小

.taiji::before {
            content:'' ;
            /* 伪类一定要加content */
            height: 30px;
            width: 30px;
            background-color: #fff;
            border-radius: 50%;
            border: 60px solid #000;
            position: absolute;
            top:23%;           
        }
        .taiji::after {
            content:'' ;
            /* 伪类一定要加content */
            height: 30px;
            width: 30px;
            background-color: #000;
            border-radius: 50%;
            border: 60px solid #fff;
            position: absolute;
            top:23%;
            left:50%;           
        }

与之前用div做的圆比较，使用伪元素节省了两个div，由此可见，活用伪类对于优化文档，减少js操作有一定帮助。

TEST | 通过伪元素做一张太极图

猜你喜欢