太极图

Posted 2022-12-12 niuyaomin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了太极图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE HTNL>
<html lang="en">
<html>
<mate charset="utf-8">
<head>
<title></title>
<style>
*padding:0;
margin:0;

div
width:200px;
height:200px;
background-image: linear-gradient(90deg,red 50%,white 50%);

border-radius:50%;
margin:200px auto;
animation:zhuan 2s infinite linear;


div:before
            content:"";
            width: 40px;
            height: 40px;
            background-color: white;
            border:30px solid red;
            position:absolute;
            left:50px;
            border-radius:50%;
            
 
        
        div:after
            content:"";
            width: 40px;
            height: 40px;
            background-color:red;
            border:30px solid white;
            position:absolute;
            left:50px;
            top:100px;
            border-radius:50%;
            
            
        
 @keyframes zhuanfromtransform:rotate(0deg);totransform:rotate(360deg);

</style>
</head>
<body style="background-color:black;">
<div></div>
</body>

技术图片

以上是关于太极图的主要内容，如果未能解决你的问题，请参考以下文章