太极旋转，太上无为

渔钓道人

已于 2023-07-04 14:06:49 修改

阅读量60

点赞数 1

文章标签： css css3 前端

于 2023-07-04 14:03:34 首次发布

本文链接：https://blog.csdn.net/nice_person__/article/details/131532165

版权

a太极图旋转代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极</title>
    <style>
        body{
            background-color: wheat;
        }
        .fu{
            width: 500px;
            height: 500px;
            
            position: relative;
            animation:move1 0.5s linear 1s 6 ;
        }
        .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;
            top: 250px;
           z-index:1;
        }
        .z5{
            width: 80px;
            height: 80px;
            background-color:white;
            border-radius: 50%;
            left: 250px;
            top: 85px;
           z-index:2;
        }
        .z6{
            width: 80px;
            height: 80px;
            background-color:black;
            border-radius: 50%;
            left: 200px;
            top: 335px;
           z-index:2;
        }
        @keyframes move1 {
            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="z6"></div>
        
    </div>
</body>
</html>

下面这段代码表示将页面的背景颜色设置为小麦色（wheat）。当您将这段代码应用到您的 CSS 文件或内联样式中时，整个网页的背景颜色将变为小麦色。

body{
            background-color: wheat;
        }

background-color 属性用于指定元素的背景颜色。在这个例子中，将 body 元素的背景颜色设置为小麦色。

小麦色是一种浅黄褐色，类似小麦成熟时的颜色。根据这段代码的应用，整个页面的背景将呈现小麦色的效果。

.fu {
  width: 500px;
  height: 500px;
  position: relative;
  animation: move1 1s linear 1s 100;
}

这段代码表示该元素具有宽度和高度为 500 像素，并使用相对定位。此外，它还应用了一个名为 move1 的动画，具体属性如下：

1s：动画持续时间为 1 秒。
linear：动画速度函数为线性，即等速匀速运动。
1s：动画延迟时间为 1 秒，即在加载页面后经过 1 秒才开始执行动画。
100：动画将重复播放 100 次。
alternate：表示动画应该在每次重复播放时反向运行，即正向播放完后逆向播放。
forwards：表示动画结束后，元素会保持动画最后一帧的状态。

.fu > div {
  position: absolute;
}

这段代码表示选择 .fu 类下的直接子元素 div，并设置其定位属性为绝对定位（position: absolute;）。

通过这个样式，.fu 下的所有直接子元素 div 将采用绝对定位。绝对定位使得元素可以相对于其最近的非静态定位的父元素进行定位。这意味着，.fu 的子级 div 元素可以通过指定 top、right、bottom 和 left 属性来精确地控制其位置。

请注意，这段代码只会影响直接作为 .fu 子级的 div 元素，而不会影响更深层次的嵌套子元素。如果您希望设置所有后代 div 元素的定位属性为绝对定位，可以使用以下代码：

.z1 {
  width: 250px;
  height: 500px;
  background-color: black;
  border-radius: 250px 0px 0px 250px;
}

这段代码定义了一个名为 .z1 的类，它具有以下属性：

width: 250px;：指定元素的宽度为 250 像素。
height: 500px;：指定元素的高度为 500 像素。
background-color: black;：将元素的背景颜色设置为黑色。
border-radius: 250px 0px 0px 250px;：使用圆角属性将元素的左上角和右下角边框添加成半圆形。具体来说，左上角的水平半径和垂直半径都为 250 像素，而右下角的水平半径和垂直半径都为 0 像素。这将使得元素左上角呈现为一个四分之一圆形。
通过上述样式，.z1 类的元素将具有一个宽度为 250px，高度为 500px，背景颜色为黑色的矩形形状，且左上角会呈现出一个四分之一的圆形效果。

css
Copy Code
.z2 {
  width: 250px;
  height: 500px;
  background-color: white;
  border-radius: 0px 250px 250px 0px;
  left: 250px;
}

这段代码定义了一个名为 .z2 的类，它具有以下属性：

width: 250px;：指定元素的宽度为 250 像素。
height: 500px;：指定元素的高度为 500 像素。
background-color: white;：将元素的背景颜色设置为白色。
border-radius: 0px 250px 250px 0px;：使用圆角属性将元素的右上角和左下角边框添加成半圆形。具体来说，右上角的水平半径和垂直半径都为 250 像素，而左下角的水平半径和垂直半径都为 0 像素。这将使得元素右上角呈现为一个四分之一圆形。
left: 250px;：将元素的左边缘相对于其包含块的左边缘位置偏移 250 像素。

通过上述样式，.z2 类的元素将具有一个宽度为 250px，高度为 500px，背景颜色为白色的矩形形状，且右上角会呈现出一个四分之一的圆形效果。同时，元素相对于其包含块的左边缘位置偏移了 250px。

.z3 {
  width: 250px;
  height: 250px;
  background-color: black;
  border-radius: 50%;
  left: 125px;
  z-index: 1;
}

这段代码定义了一个名为 .z3 的类，它具有以下属性：

width: 250px;：指定元素的宽度为 250 像素。
height: 250px;：指定元素的高度为 250 像素。
background-color: black;：将元素的背景颜色设置为黑色。
border-radius: 50%;：使用圆角属性将元素的边框设置为圆形。通过将边框半径设置为 50%，可以确保元素呈现为一个圆形。
left: 125px;：将元素的左边缘相对于其包含块的左边缘位置偏移 125 像素。
z-index: 1;：将元素的堆叠顺序设置为 1。如果多个元素发生重叠，具有更高堆叠顺序的元素将位于较低堆叠顺序的元素上方。
通过上述样式，.z3 类的元素将具有一个宽度为 250px，高度为 250px，背景颜色为黑色的圆形形状。同时，元素相对于其包含块的左边缘位置偏移了 125px，并且具有堆叠顺序为 1，这意味着它在发生重叠时会处于较高的层级上方。

@keyframes move1 {
            from{
transform: rotate(0deg);
            }to{
                transform: rotate(360deg);
            }
        }

这段代码是使用 CSS @keyframes 规则创建了一个名为 move1 的关键帧动画。该动画定义了从 rotate(0deg) 到 rotate(360deg) 的旋转效果。

在 CSS 中，@keyframes 是用来定义动画序列的规则。通过指定多个关键帧（动画中的不同状态），我们可以创建出平滑过渡的动画效果。

这里的 from 表示开始状态（起始关键帧），而 to 则表示结束状态（结束关键帧）。在这个动画中，元素将从初始状态（rotate(0deg)）逐渐旋转到终止状态（rotate(360deg)）。

要使用这个动画，您需要将它应用到指定的元素上。您可以通过添加 CSS 类或直接在元素上应用样式来实现。

<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 结构，其中包含一个父容器和六个子容器。

<body>：表示整个 HTML 文档的主体部分。在这里放置了一个父容器。
<div class="fu">：表示一个父容器，具有类名为 "fu" 的 CSS 类。可以通过该类名或直接在元素上添加样式来对其进行样式调整。
<div class="z1"></div> 到 <div class="z6"></div>：表示六个子容器，每个容器具有类名 z1、z2、z3、z4、z5 和 z6。同样可以使用这些类名或在元素上添加样式来对每个容器进行样式调整。

渔钓道人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
太极旋转，太上无为

通过上述样式，.z3 类的元素将具有一个宽度为 250px，高度为 250px，背景颜色为黑色的圆形形状。同时，元素相对于其包含块的左边缘位置偏移了 125px，并且具有堆叠顺序为 1，这意味着它在发生重叠时会处于较高的层级上方。类的元素将具有一个宽度为 250px，高度为 500px，背景颜色为白色的矩形形状，且右上角会呈现出一个四分之一的圆形效果。通过上述样式，.z1 类的元素将具有一个宽度为 250px，高度为 500px，背景颜色为黑色的矩形形状，且左上角会呈现出一个四分之一的圆形效果。
复制链接

扫一扫