纯CSS3使用边框实现太极图（三个div）

最新推荐文章于 2021-11-05 02:29:53 发布

Mr.王征

最新推荐文章于 2021-11-05 02:29:53 发布

阅读量526

点赞数 6

分类专栏： CSS 文章标签：太极图

本文链接：https://blog.csdn.net/wangzhneg123/article/details/88185701

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS3使用边框实现太极图（三个div）</title>

    <!--border
   太极图  用border 实现   要求比 background-image 更简洁的代码
-->
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 5px solid #f00;
            border-radius: 50%;
            background-image: linear-gradient(90deg,#fff 50%,#000 50%);
            position: relative;
        }
         .top,.bottom{
             width: 60px;
             height: 60px;
             border-radius: 50%;
             position: absolute;
             left: 25%;
         }
         .top{
             background-color: #fff;
             border: 70px solid #000;
         }
         .bottom{
             bottom: 0px;
             background-color: #000;
             border: 70px solid #fff;
         }
        .box:hover{
            transition: 3s;
            transform: translateX(1000px) rotateZ(1000deg) ;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
</body>
</html>