今日CSS之旋转太极图

huhuhu667

已于 2023-07-10 18:25:27 修改

阅读量78

点赞数 1

文章标签： css 前端

于 2023-07-07 10:42:54 首次发布

本文链接：https://blog.csdn.net/huhuhu667/article/details/131533688

版权

你知道一个旋转太极图怎么做吗？你知道怎么用CSS来实现旋转的太极图吗？你难道还不会用CSS来实现旋转太极图吗？不要慌张，今天我来教你如何去实现一个旋转太极图。

实现流程：

首先，我们在body里面建立一个父类div，其次再建6个我们需要用到的子类div，这些准备工作做好之后我们开始进行CSS的书写。

CSS的书写我们在style里面进行，对于单个的元素我们用子绝父相的定位方式（子类绝对定位，父类相对定位），并且要定义好子类和父类的width和height。下面是代码演示（里面很详细的代码不了解的可以关注私聊问我，或者在评论区提问）：

        .fu{
            width:500px;
            height:500px;
        }
         .fu>div{
          position: absolute;
			
			
        }
        .z1{
            width: 250px;
            height: 500px;
            background-color: black;
            border-radius: 250px 0px 0px 250px;
        }
        .z2{
            width: 250px;
            height: 500px;
            background-color:white;
            border-radius: 0px 250px 250px 0px;
            left:250px;
        }
        .z3{
            width:250px;
            height:250px;
            background: white;
            border-radius: 50%;
            z-index: 1;
            left: 125px;
        }
        .z4{
            width:250px;
            height:250px;
            background: black;
            border-radius: 50%;
            z-index: 1;
            left: 125px;
            top: 250px;
        }
        .z5{
            width:90px;
            height:90px;
            background: black;
            border-radius: 50%;
            z-index: 1;
            left:200px;
            top: 80px;
        }
        .z6{
            width:90px;
            height:90px;
            background: white;
            border-radius: 50%;
            z-index: 1;
            left:200px;
            top: 350px;
        }

将父类和子类的CSS书写完之后，我们来实现旋转的动画，代码如下。在动画实现完了别忘记了在父类里面用animation层叠样式表定义动画的属性值，animation属性值参考开发文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

.fu{
            width:500px;
            height:500px;
			animation: move1 2s linear infinite;
            /* animation: 动画名字  动画周期  运动函数  延迟运动时间 播放次数; */
            
        }
@keyframes move1{
			from{
				transform: rotate(0deg);
			}to{
				transform: rotate(360deg);
			}
			
		}

最后，下面是完整的太极图代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>太极图</title>
    <style>
		body{
			background-color:chartreuse;
		}
        .fu{
            width:500px;
            height:500px;
			animation: move1 2s linear infinite;
			/* animation: 动画名字  动画周期  运动函数  延迟运动时间 播放次数; */
        }
        .fu>div{
            position: absolute;
			
			
        }
		@keyframes move1{
			from{
				transform: rotate(0deg);
			}to{
				transform: rotate(360deg);
			}
			
		}
        .z1{
            width: 250px;
            height: 500px;
            background-color: black;
            border-radius: 250px 0px 0px 250px;
        }
        .z2{
            width: 250px;
            height: 500px;
            background-color:white;
            border-radius: 0px 250px 250px 0px;
            left:250px;
        }
        .z3{
            width:250px;
            height:250px;
            background: white;
            border-radius: 50%;
            z-index: 1;
            left: 125px;
        }
        .z4{
            width:250px;
            height:250px;
            background: black;
            border-radius: 50%;
            z-index: 1;
            left: 125px;
            top: 250px;
        }
        .z5{
            width:90px;
            height:90px;
            background: black;
            border-radius: 50%;
            z-index: 1;
            left:200px;
            top: 80px;
        }
        .z6{
            width:90px;
            height:90px;
            background: white;
            border-radius: 50%;
            z-index: 1;
            left:200px;
            top: 350px;
        }
    </style>
</head>
<body>

<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    <div class="z4"></div>
    <div class="z5"></div>
    <div class="z6"></div>

</div>

</body>
</html>

看到这里了，要不给咱来个免费的赞嘛。

huhuhu667

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
今日CSS之旋转太极图

首先，我们在body里面建立一个父类div，其次再建6个我们需要用到的子类div，这些准备工作做好之后我们开始进行CSS的书写。CSS的书写我们在style里面进行，对于单个的元素我们用子绝父相的定位方式（子类绝对定位，父类相对定位），并且要定义好子类和父类的width和height。top: 250px;.z5{
复制链接

扫一扫