CSS布局、定位与动画（旋转太极实现）

码龄4年

关注

原创最新推荐文章于 2026-03-05 06:50:27 发布 189 阅读

关于css制作太极旋转动画 CSS（层叠样式表）是一种用于描述和控制网页外观和样式的标记语言。它与HTML（超文本标记语言）一起使用，用于将网页内容从其呈现方式（如颜色、字体、布局等）分离出来。CSS通过选择器（selector）和声明块（declaration block）的组合来定义样式规则。选择器指定了要应用样式的HTML元素，而声明块定义了要应用的具体样式属性和对应的值。CSS的特点包括：分离关注点：通过将样式与HTML分离，使得网页的结构和内容与设计和样式分开，提高了代码的可维护性和复用性。层叠性。阅读详情

CSS布局和定位

div默认占整行

float浮起来排列（设定左或右边界）

子元素绝对定位

position: absolute;

1.初始位置在左上

2.通过left和top控制x、y轴

父元素相对定位

position: relative;

z-index 覆盖优先级

border-radiu边框弯曲程度 solid black 设定黑色

1个值定义4边

2值定义对角

4值按顺时针定义

动画集成属性

设定名

运动时间

延迟

次数（infinite无限次）

运动轨迹：线性

移动路线：往返

行进模式：前进

动画表头声明设置路径

旋转太极实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转太极</title>
    <style>
        .fu{
            width:500px;
            height:500px;
            border:1px solid black;
            background-color:gainsboro;
            animation: taiji 2s linear infinite ;

        }/*定义父类class*/
        .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;
        }
        @keyframes taiji {
            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>