用html+css做旋转太极

小萌新学java

于 2023-07-04 21:30:32 发布

阅读量191

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_71869542/article/details/131539559

版权

前言

学习第二天

一、太极的组成

太极首先要一个正方形放入两个半圆，左边黑色、右边白色

以上要三种样式

在左边黑色下面再放上一个黑色圆形形成太极左半部分，白色上方放上白色圆形组成太极右半部分

加上后五种样式

上下加上不同对立颜色黑白相间

加上后七种样式

图片效果如下：

二、太极的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>太极</title>
  <style>
  body{
  background-color:gray;
  }
  .fu{
  width:500px;
  height:500px;
  position:relative;
  animation:circles 2s linear infinite;
  }
  .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-color:black;
  border-radius:50%;
  left:125px;
  z-index:1;
  }
  .z4{
  width:250px;
  height:250px;
  background-color:white;
  border-radius:50%;
  left:125px;
  z-index:1;
  }
  .z5{
  width:80px;
  height:80px;
  background-color:black;
  border-radius:50%;
  left:210px;
  top:85px;
  z-index:2;
  }
  .z6{
  width:80px;
  height:80px;
  background-color:white;
  border-radius:50%;
  left:210px;
  top:335px;
  z-index:2;
  }
  .z7{
  width:250px;
  height:250px;
  background-color:black;
  border-radius:50%;
  left:125px;
  top:250px;
  z-index:2;
  }
  @keyframes circles{
      from{
       transform:rotate(0deg);
      }to{
      transform:rotate(360deg);
      }
    }
  </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="z7"></div>
  <div class="z6"></div>
</div>

</body>
</html>