css的伪类：before 和：after 的强大之处

最新推荐文章于 2025-08-13 18:53:35 发布

原创最新推荐文章于 2025-08-13 18:53:35 发布 · 568 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用纯CSS技术来绘制太极图与八卦图，重点讲解了利用:before和:after伪类来创建这些图形的方法，并通过关键帧动画实现了旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

太极图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>八卦图</title>
    <style>
        /*=====
            技术要点:实现此技术需要用到css伪类:before和:after--->>注意点:就是要在指定的元素内容之前或者之后插入一个包含content属性(需要注意的是如果没有content属性伪类将没有任何作用);
        ====*/
        *{margin: 0;padding: 0;}
        body{background: blue;}
        .Gossip{
            width:192px;
            height:96px;
            background: #fff;
            border-style: solid;
            border-width: 0px 0px 100px 0px;
            position: relative;
            border-radius:50%;
            margin: 100px auto;
            -webkit-animation:move 2s linear infinite;
        }
        .Gossip:before,
        .Gossip:after{
            content: "";
            position: absolute;
        }
        .Gossip:before{
            width: 24px;
            height: 24px;
            top:50%;
            left:0px;
            background: #fff;
            border: 36px solid #000;
            border-radius:50%;
        }
        .Gossip:after{
            width: 24px;
            height: 24px;
            top:50%;
            left:50%;
            background:#000;
            border: 36px solid #fff;
            border-radius:50%;
        }
        @keyframes move{
            0%{
                -webkit-transform:rotate(0deg);
            }
            100%{
                -webkit-transform:rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="Gossip"></div>
</body>
</html>

![八卦](https://img-blog.csdn.net/20161117015500561)