1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         .zuiwai{
  11.             width:800px;
  12.             height: 800px;
  13.             border:1px solid black;
  14.            margin:0 auto;
  15.             border-radius:50%;
  17.             background:linear-gradient(to right,#000000 0%,#000000 50%,#FFFFFF 51%,#FFFFFF 100%);
  18.             animation: zhuan 10s linear infinite;
  20.         }
  21.         .li1,.li2{
  22.             border:1px solid rgba(0,0,0,0);
  23.             width: 399px;
  24.             height: 399px;
  25.             border-radius: 50%;
  26.             margin-left:211px;
  30.         }
  31.         .li1{
  33.             transform: rotate(-46deg);
  34.             background-color: white;
  35.         }
  36.         .li2{
  38.             transform: rotate(-46deg);
  39.             background-color: black;
  41.         }
  42.         .nei1,.nei2{
  43.             width: 199px;
  44.             height: 199px;
  45.             border-radius: 50%;
  46.             border:1px solid black;
  47.             margin-left:90px;
  48.             margin-top:90px;
  49.         }
  50.         .nei1{
  51.             background-color: #262626;
  52.         }
  53.         .nei2{
  54.             background-color: white;
  55.         }
  56.         @keyframes zhuan {
  57.             50%{
  58.                 transform: rotate(180deg) scale(0.5,0.5) ;
  61.             }
  62.             100%{
  63.                 transform: rotate(360deg) scale(1,1) ;
  65.             }
  66.         }
  67.     </style>
  68. </head>
  69. <body>
  70. <div class="zuiwai">
  71.     <div class="li1">
  72.         <div class="nei1"></div>
  73.     </div>
  75.     <div class="li2">
  76.         <div class="nei2"></div>
  77.     </div>
  78. </div>
  79. </body>
  80. </html>