ASCII码 ASCII码

太极图作业

发布于：2022-05-14 13:33:42  栏目：技术文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>太极图</title>
  7.     <style>
  8.         body{
  9.             background: #7c7c7c;
  10.         }
  11.         .taiji{
  12.             width: 300px;
  13.             height: 300px;
  14.             border-radius: 300px;
  15.             margin: 50px auto;
  16.             overflow: hidden;
  17.             display: flex;
  18.             animation: taiji 5s infinite linear;
  19.         }
  20.        @keyframes taiji{
  21.            0%{
  22.                transform: rotate(0deg);
  23.            }
  24.            100%{
  25.                transform: rotate(360deg);
  26.            }
  27.        }
  28.         .taijileft{
  29.             height: 300px;
  30.             width: 150px;
  31.             background: white;
  32.         }
  33.         .taijirigth{
  34.             height: 300px;
  35.             width: 150px;
  36.             background: black;
  37.         }
  38.         .taijil{
  39.             width: 150px;
  40.             height: 150px;
  41.             border-radius: 150px;
  42.             position: relative;
  43.             left: 80px;
  44.             margin:0px auto;
  45.             z-index: 3;
  46.             background: white;
  48.         }
  49.         .taijir{
  50.             width: 148px;
  51.             height: 148px;
  52.             border: 1px solid #000;
  53.             border-radius: 150px;
  54.             position: relative;
  55.             top: 150px;
  56.             right: 75px;
  57.             background: black;
  58.             margin:0px auto;
  59.         }
  60.         .taijil div{
  61.             width: 30px;
  62.             height: 30px;
  63.             border-radius: 30px;
  64.             background: black;
  65.             position: relative;
  66.             top: 37%;
  67.             left: 39%;
  68.         }
  69.         .taijir div{
  70.             width: 30px;
  71.             height: 30px;
  72.             border-radius: 30px;
  73.             background: white;
  74.             position: relative;
  75.             left: 39%;
  76.             top: 38%;
  77.         }
  79.     </style>
  80. </head>
  81. <body>
  82.     <div class="taiji">
  83.         <div class="taijileft">
  84.             <div class="taijil">
  85.                 <div></div>
  86.             </div>
  87.         </div>
  89.         <div class="taijirigth">
  90.             <div class="taijir">
  91.                 <div></div>
  92.             </div>
  93.         </div>
  95.     </div>
  96. </body>
  97. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行