css3做太极图

最新推荐文章于 2023-04-14 20:48:04 发布

huxiaoxiao.

最新推荐文章于 2023-04-14 20:48:04 发布

阅读量503

点赞数 1

分类专栏： css 文章标签：前端 css3

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121525626

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何利用CSS3的伪类和动画功能制作一个炫酷的旋转太极图。首先通过before和after伪类创建黑白两部分，然后添加内部半圆，最后通过keyframes动画实现360度旋转效果，达到太极图动态旋转的视觉呈现。

摘要由CSDN通过智能技术生成

使用 css3 制作炫酷的会转的太极图：

先做出基本外观：

<body>
    
    <div class="box"></div>

</body>

最外层样式：

 <style>
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            /* 最外层大盒子倒圆角边 */
            border-radius: 50%;
            /* 加上盒子阴影，方便查看 */
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
            position: relative;
        }
        /* 使用伪类，做出左右黑白两块区域 */
        /* 黑色 */
        .box:before{
            content: '';
            display: block;
            width: 200px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #000;
            /* 倒圆角边 */
            border-top-left-radius:200px;
            border-bottom-left-radius:200px;
        }

        /* 白色 */
        .box:after{
            content: '';
            display: block;
            width: 200px;
            height: 400px;
            background-color: #fff;
            position: absolute;
            right: 0;
            top: 0;
            /* 倒圆角边 */
            border-top-right-radius:200px;
            border-bottom-right-radius:200px;
        }
    </style>

现在是这个样子：

在 .box 盒子中加上两个小盒子，做出交汇的半圆:

<body>
    
    <div class="box">
        <div class="banyuan1"></div>
        <div class="banyuan2"></div>
    </div>

</body>

样式：

  /* 黑色半圆 */
        .banyuan1{
            width: 200px;
            height: 200px;
            background-color: #000;
            z-index: 2;
            position: absolute;
            top: 0;
            left: 100px;
            border-radius: 300px;
        }
        /* 白色半圆 */
        .banyuan2{
            width: 200px;
            height: 200px;
            background-color: #fff;
            z-index: 2;
            position: absolute;
            top: 200px;
            right: 100px;
            border-radius: 300px;
        }

大致这个样子：

在使用伪类，做出半圆中的小圆：

.banyuan1:after{
            content: '';
            width:75px;
	        height:75px;
	        background-color:white;
	        border-radius:75px;
	        position:absolute;
	        top: 60px;
	        left: 55px;
	        z-index:3;
        }
        .banyuan2:after{
            content:"";
            width:75px;
            height:75px;
            background-color:black;
            border-radius:75px;
            position:absolute;
            bottom: 60px;
            right: 55px;
            z-index:3;
        }

样式做好了：

给外层盒子添加动画：

/*动画*/

animation: mymove 2s linear infinite;

给太极图做旋转效果，360度旋转：

 .box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            /* 最外层大盒子倒圆角边 */
            border-radius: 50%;
            /* 加上盒子阴影，方便查看 */
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
            position: relative;
            
            animation: xuanzhuan 2s linear infinite;
        }
        @keyframes xuanzhuan {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }

查看效果：

旋转的太极图1.gif