太极图动画

心平气荷.

已于 2023-02-23 22:07:13 修改

阅读量78

点赞数

分类专栏： CSS css案例练习文章标签： css css3 html

于 2023-02-23 21:16:43 首次发布

本文链接：https://blog.csdn.net/qq_53306713/article/details/129190443

版权

css案例练习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

实现思路：

1.把这个圆看成是由两个长方体进行羽化而来，然后我们给它分别调成黑白两色（在大盒子里面再写两个大小一样的盒子，在排列上可以用浮动float，也可以用弹性盒子display：flex）

2.然后再写两个宽高为大圆一半的圆，通过定位把它们分别定位到圆中心垂直线上。

3.在两个小圆的盒子里面再分别添加上“眼睛”（小圆），具体实现代码如下所示。

在这里插入图片描述

太极图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太极图动画</title>
  <style>
    .circle {
      border: 1px solid #ccc;
      border-radius: 50%;
      width: 400px;
      height: 400px;
      margin: 100px auto;
      position: relative;
      animation: circle 5s linear infinite;
      display: flex;
    }

    @keyframes circle {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .l {
      /* float: left; */
      width: 200px;
      height: 400px;
      background-color: #fff;
      border-top-left-radius: 200px;
      border-bottom-left-radius: 200px;
    }

    .r {
      /* float: right; */
      width: 200px;
      height: 400px;
      background-color: #000;
      border-top-right-radius: 200px;
      border-bottom-right-radius: 200px;
    }

    .c1 {
      width: 200px;
      height: 200px;
      background-color: #fff;
      position: absolute;
      border-radius: 50%;
      left: 100px;
      top: 0px;
    }

    .c2 {
      width: 200px;
      height: 200px;
      background-color: #000;
      position: absolute;
      border-radius: 50%;
      left: 100px;
      top: 200px;
    }

    .black {
      width: 50px;
      height: 50px;
      background-color: #000;
      border-radius: 50%;
      position: absolute;
      top: 78px;
      left: 64px;
    }

    .white {
      width: 50px;
      height: 50px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 78px;
      left: 64px;
    }
  </style>
</head>

<body>
  <div class="circle">
    <div class="l"></div>
    <div class="r"></div>
    <div class="c1">
      <div class="black"></div>
    </div>
    <div class="c2">
      <div class="white"></div>
    </div>
  </div>
</body>

</html>