太极旋转代码效果图展示

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>太极旋转</title>
  6.         <style type="text/css">
  7.             div{
  8.                 margin: auto;
  9.                 width: 400px;
  10.                 height: 200px;
  11.                 border: solid red;
  12.                 border-width: 200px 1px 1px 1px;
  13.                 border-radius: 50%;
  14.                 position: relative;
  15.                 -webkit-animation: circle_taiji 2s linear infinite;
  16.                         animation: circle_taiji 2s linear infinite;
  17.             }
  18.             div::before{
  19.                 content: "";
  20.                 width: 40px;
  21.                 height: 40px;
  22.                 background-color: red;
  23.                 border: 80px solid white;
  24.                 border-radius: 50%;
  25.                 position: absolute;
  26.                 top: -100px;
  27.                 left: 0px;
  28.             }/*添加为元素边框宽度*/
  29.             div::after{
  30.                 content: "";
  31.                 width: 40px;
  32.                 height: 40px;
  33.                 background-color: white;
  34.                 border: 80px solid red;
  35.                 border-radius: 50%;
  36.                 position: absolute;
  37.                 top: -100px;
  38.                 left: 200px;
  39.             }
  41.             @-webkit-keyframes circle_taiji{
  42.                 form{transform: rotate(0deg);}
  43.                 to{transform: rotate(360deg);}
  44.             }
  45.             @keyframes circle_taiji{
  46.                 form{transform: rotate(0deg);}
  47.                 to{transform: rotate(360deg);}
  48.             }
  49.         </style>
  50.     </head>
  51.     <body>
  52.         <div></div>
  53.     </body>
  54. </html>