ASCII码 ASCII码

作业-太极图

发布于：2022-05-10 11:07:11  栏目：技术文档
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>太极图</title>
  6.         <style>
  7.             body, ul, li{
  8.                 margin: 0; padding: 0;
  9.                 padding-top: 50px;
  10.             }
  11.             .mask{
  12.                 width: 300px;
  13.                 height: 300px;
  14.                 margin: 0 auto;
  15.                 border-radius: 100%;
  16.                 border: 2px solid #000;
  17.                 position: relative;
  18.                 transition:background-color .5s ease-in;
  19.                 animation: rotate 15s linear infinite;
  20.             }
  21.             .mask:hover{
  22.                 animation-play-state: paused;
  23.             }
  24.             .mask div{
  25.                 position: absolute;
  26.             }
  27.             .mask .left{
  28.                 width:150px; height: 300px;
  29.                 background-color: #000;
  30.                 left: 0px;
  31.                 top: 0px;
  32.                 border-radius: 300px 0 0 300px / 300px 0 0 300px;
  33.             }
  34.             .mask .right{
  35.                 width:150px; height: 300px;
  36.                 background-color: #FFF;
  37.                 right: 0px;
  38.                 top: 0px;
  39.                 border-radius: 0 300px 300px 0 / 0 300px 300px 0;
  40.             }
  41.             .mask .top{
  42.                 width: 150px; height: 150px;
  43.                 background-color: #FFF;
  44.                 border: 50px solid #000;
  45.                 box-sizing: border-box;
  46.                 position: absolute;
  47.                 border-radius: 100%;
  48.                 top: 0px;
  49.                 left: 75px;
  50.             }
  51.             .mask .bottom{
  52.                 width: 150px; height: 150px;
  53.                 background-color: #000;
  54.                 border: 50px solid #FFF;
  55.                 box-sizing: border-box;
  56.                 position: absolute;
  57.                 border-radius: 100%;
  58.                 bottom: 0px;
  59.                 left: 75px;
  60.             }
  61.             @keyframes rotate {
  62.                 10%{
  63.                     transform: rotate(36deg);
  64.                 }
  65.                 20%{
  66.                     transform: rotate(72deg);
  67.                 }
  68.                 30%{
  69.                     transform: rotate(108deg);
  70.                 }
  71.                 40%{
  72.                     transform: rotate(144deg);
  73.                 }
  74.                 50%{
  75.                     transform: rotate(180deg);
  76.                 }
  77.                 60%{
  78.                     transform: rotate(216deg);
  79.                 }
  80.                 70%{
  81.                     transform: rotate(252deg);
  82.                 }
  83.                 80%{
  84.                     transform: rotate(288deg);
  85.                 }
  86.                 90%{
  87.                     transform: rotate(324deg);
  88.                 }
  89.                 100%{
  90.                     transform: rotate(360deg);
  91.                 }
  92.             }
  93.         </style>
  94.     </head>
  95.     <body>
  96.         <div class="mask">
  97.             <div class="left"></div>
  98.             <div class="right"></div>
  99.             <div class="top"></div>
  100.             <div class="bottom"></div>
  101.         </div>
  102.     </body>
  103. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行