[分享]css八卦图制作

CSS八卦图是一种非常流行的网页设计元素，现在我们就来学习一下如何制作一个CSS八卦图。首先，我们需要一个HTML文件，其中包含一个div元素： 接下来，我们就需要使用CSS来给这个div元素添加样式...

CSS八卦图是一种非常流行的网页设计元素，现在我们就来学习一下如何制作一个CSS八卦图。

首先，我们需要一个HTML文件，其中包含一个div元素：

 <div class="yin-yang"></div>

接下来，我们就需要使用CSS来给这个div元素添加样式。我们先给这个div元素设置宽度和高度：

  .yin-yang {
            width: 100px;
            height: 100px;
        } 

然后，我们需要使这个元素变成一个圆形。我们可以使用border-radius属性来完成这个任务：

  .yin-yang {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        } 

下面，我们需要添加黑白两色的半圆形。我们可以使用伪元素来完成这个任务：

  .yin-yang {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: relative;
        }
        
        .yin-yang:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background-color: black;
            z-index: 10;
            border-radius: 50%;
        }
        
        .yin-yang:after {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 50%;
            height: 100%;
            background-color: white;
            z-index: 10;
            border-radius: 50%;
        } 

最后，我们需要添加两个小圆形和两个阴阳眼。这部分代码如下：

  .yin-yang .yuan {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin-top: -10px;
            margin-left: -10px;
            background-color: black;
            border-radius: 50%;
            z-index: 20;
        }
        
        .yin-yang .yuan.right {
            left: auto;
            right: 50%;
            background-color: white;
        }
        
        .yin-yang .yan {
            position: absolute;
            top: 25%;
            left: 50%;
            width: 10px;
            height: 10px;
            margin-top: -5px;
            margin-left: -5px;
            background-color: white;
            border-radius: 50%;
            z-index: 30;
        }
        
        .yin-yang .yan.right {
            left: auto;
            right: 50%;
            background-color: black;
        } 

现在，我们的CSS八卦图就完成了！