CSS制作太极图

最新推荐文章于 2023-03-10 20:12:21 发布

Bian_Zhuang

最新推荐文章于 2023-03-10 20:12:21 发布

阅读量388

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/Bian_Zhuang/article/details/105281636

版权

效果图:

有动画效果,这个是截图!在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极图</title>
    <style>
        /* 通配符 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 类选择器 */
        .box{
            /* 相对定位 不会脱离文档流*/
            position: relative;
            width: 140px;
            height: 70px;
            /* 上下 左右 居中 */
            margin: 100px auto;
            /* 边框 实线 */
            border-style: solid;
            /* 上右下左 */
            border-width: 2px 2px 72px 2px;
            /* 圆角属性 */
            border-radius: 50%;
            /* 调用下面rot */
            /* 动画绑定 时间 无限循环 匀速运动*/
            animation: rot 2s infinite linear;
        }
        /* 伪元素 css新增 before:元素头部添加内容 插入内容 */
        .box::before{
            content: "";
            /* 绝对定位  脱离文档流  父元素 */
            position: absolute;
            top: 50%;
            left: 0;
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
            border: 20px solid #000;
        }
        /* 尾部添加元素 */
        .box::after{
            content: "";
            /* 绝对定位  脱离文档流  父元素 */
            position: absolute;
            width: 30px;
            height: 30px;
            top: 50%;
            left:50%;
            background-color: #000;
            border: 20px solid #fff;
            border-radius: 50%;
        }
        /* 旋转 */
        /* 创建动画 名称  0%开始  100%结束*/
        @keyframes rot{
            0%{
                transform: rotate(0deg);
                /* 变形 旋转  360度*/
            }
            100%{
                transform: rotate(360deg);
                /* 变形 旋转  360度*/
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>