太极动态（自己旋转）

最新推荐文章于 2024-10-18 21:23:17 发布

王猫粮

最新推荐文章于 2024-10-18 21:23:17 发布

阅读量100

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_70684059/article/details/129675184

版权

<style>
body{
     background-color: lightblue;
}
div{
    width: 200px;
    height: 200px;
    background: linear-gradient(white 50%,black 50%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    border-radius: 50%;
   animation: cat 2s linear infinite;
}
@keyframes cat {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
div::before{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background: radial-gradient(white 25%,black 30%);
    border-radius: 50%;
}
div::after{
    content:"" ;
    display: block;
    width: 100px;
    height: 100px;
    background: radial-gradient(black 25%,white 30%);
    border-radius: 50%;
}
</style>
<body>
    <div></div>
</body>