太极图案例

2022年05月13日 20:27:17阅读数:84博客 / 寒夏 /

<!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: #7c7c7c;        }        .taiji{            width: 300px;            height: 300px;            border-radius: 300px;            margin: 50px auto;            overflow: hidden;            display: flex;            animation: taiji 5s infinite linear;        }       @keyframes taiji{           0%{               transform: rotate(0deg);           }           100%{               transform: rotate(360deg);           }       }        .taijileft{            height: 300px;            width: 150px;            background: white;        }        .taijirigth{            height: 300px;            width: 150px;            background: black;        }        .taijil{            width: 150px;            height: 150px;            border-radius: 150px;            position: relative;            left: 80px;            margin:0px auto;            z-index: 3;            background: white;        }        .taijir{            width: 148px;            height: 148px;            border: 1px solid #000;            border-radius: 150px;            position: relative;            top: 150px;            right: 75px;            background: black;            margin:0px auto;        }        .taijil div{            width: 30px;            height: 30px;            border-radius: 30px;            background: black;            position: relative;            top: 37%;            left: 39%;        }        .taijir div{            width: 30px;            height: 30px;            border-radius: 30px;            background: white;            position: relative;            left: 39%;            top: 38%;        }    </style></head><body>    <div class="taiji">        <div class="taijileft">            <div class="taijil">                <div></div>            </div>        </div>        <div class="taijirigth">            <div class="taijir">                <div></div>            </div>        </div>    </div></body></html>
批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    寒夏
    博文
    6
    粉丝
    0
    评论
    0
    访问量
    683
    积分:0
    P豆:22