演示图:

image.png

注:这是正在旋转的太极八卦图


代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 *{
            margin: 0;
 padding: 0;
 }
        .all{
            width: 400px;
 height: 400px;
 border: 1px solid #000;
 box-sizing: border-box;
 margin: 200px auto;
 position: relative;
 animation:lnj 10s 10;
 /*animation-play-state:paused;*/
 }
        .all:hover{
            animation-play-state:paused;
 }
        /*.all:hover{*/
            /*transform:rotateZ(45deg);*/
        /*}*/
 @keyframes lnj{

            0%{
                transform:rotateZ(0deg);
 }
            25%{
                transform:rotateZ(90deg);
 }
            50%{
                transform:rotateZ(180deg);
 }
            75%{
                transform:rotateZ(270deg);
 }
            100%{
                transform:rotateZ(360deg);
 }
        }
        .top{
            width: 400px;
 height: 200px;
 background: red;
 border-top-left-radius: 200px 200px;
 border-top-right-radius: 200px 200px;

 }
        .bottom{
            width: 400px;
 height: 200px;
 background: yellow;
 border-bottom-left-radius: 200px 200px;
 border-bottom-right-radius: 200px 200px;

 }
        .left{
            width: 200px;
 height: 200px;
 background: red;
 border: 80px solid yellow;
 box-sizing: border-box;
 border-radius: 50%;
 position: absolute;
 left: 0;
 top: 100px;
 }
        .right{
            width: 200px;
 height: 200px;
 background: yellow;
 border: 80px solid red;
 box-sizing: border-box;
 border-radius: 50%;
 position: absolute;
 right: 0;
 top: 100px;
 }
    </style>
</head>
<body>
<div class="all">
 <!--上面的半圆-->
 <div class="top"></div>
 <!--下面的半圆-->
 <div class="bottom"></div>
 <!--左边的小圆-->
 <div class="left"></div>
 <!--右边的小圆-->
 <div class="right"></div>
</div>
</body>
</html>



这个主要有三个难点:

①边框圆角来做⚪

②div定位

③添加动画效果


废话不多说,大家看代码,看不懂在下面评论。