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

最新推荐文章于 2023-10-26 23:47:46 发布

woosm

最新推荐文章于 2023-10-26 23:47:46 发布

阅读量101

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/woosm/article/details/131533639

版权

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>

woosm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局、定位与动画（旋转太极实现）

border-radiu边框弯曲程度 solid black 设定黑色。float浮起来排列（设定左或右边界）2.通过left和top控制x、y轴。次数（infinite无限次）z-index 覆盖优先级。动画表头声明设置路径。
复制链接

扫一扫