纯CSS3使用径向渐变实现太极图效果（三个div）

最新推荐文章于 2024-05-08 16:09:38 发布

Mr.王征

最新推荐文章于 2024-05-08 16:09:38 发布

阅读量1.2k

点赞数 4

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

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

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

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

    <!--border
    画太极图最简单方法：
                   1通过使用背景渐变的方式 来实现太极图（目的灵活运用知识点综合）

                  思路： 先让.box 所在的div 通过线性渐变设置成一半黑 一半白，然后在设置成圆形
                        在内嵌两个div  设置成圆 通过浮动一上一个下  然后在通过径向渐变的特点设置 同为50%的时候没有渐变效果

   太极图  用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: 200px;
             height: 200px;
             border-radius: 50%;
             position: absolute;
             /*background-color: #00f;*/
             left: 25%;
         }
         .top{
             background-image: radial-gradient(60px at center center ,#fff 50% ,#000 50%);
         }
         .bottom{
             bottom: 0px;
             background-image: radial-gradient(60px at center center ,#000 50% ,#fff 50%);
         }
        .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>

Mr.王征

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3使用径向渐变实现太极图效果（三个div）

效果展示：源码展示：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯CSS3使用径向渐变实现太极图（三个div）&lt;/title&gt; &lt;!--border
复制链接

扫一扫