순수 CSS 코드를 사용하여 회전하는 태극권 다이어그램을 그리는 방법(코드 포함)

이것은 중국 사람들에게 매우 친숙한 패턴입니다. 태극권 다이어그램은 음과 양의 두 가지 수준으로 나누어지며 회전합니다(CSS3 애니메이션 애니메이션 속성 사용). 이 다이어그램은 CSS3를 통해 구현됩니다. 순수한 코드는 여러 개의 작은 원으로 구성되어 있으며 초보자가 CSS3를 연습하고 학습 재미를 높이기에 적합합니다.

HTML 부분:

<div class="square">
   <div class="rect rect_one">
    <div class="inner_circle rect_one_one">
     <div class="dot rect_one_two"></div>
    </div>
   </div>
   <div class="rect rect_two">
    <div class="inner_circle rect_two_one">
     <div class="dot rect_two_two"></div>
    </div>
   </div>
  </div>
  <div style="text-align:center;clear:both">
   <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
   <script src="/follow.js" type="text/javascript"></script>
  </div>

CSS 부분:

<style>
   .square {
    width: 400px;
    height: 400px;
    position: relative;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    animation: rotate infinite linear 5s;
    margin: 10% auto;
    -webkit-animation: rotate infinite linear 5s;
    margin: 10% auto;
    -moz-animation: rotate infinite linear 5s;
    margin: 10% auto;
   }
   .rect {
    width: 400px;
    height: 200px;
    position: relative;
    border: 1px #d2d2d2 solid;
    border-bottom: none;
   }   
   .inner_circle {
    width: 200px;
    height: 200px;
    border-radius: 200px;
    position: absolute;
    z-index: 1;
   }  
   .dot {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
   }  
   .rect_one {
    border-radius: 200px 200px 0 0;
    background: white;
   }  
   .rect_one_one {
    bottom: -100px;
    left: 0;
    background: black;
   }  
   .rect_one_two {
    background: white;
   }   
   .rect_two {
    border-radius: 0 0 200px 200px;
    background: black;
   }  
   .rect_two_one {
    bottom: 100px;
    right: 0;
    background: white;
   }
   .rect_two_two {
    background: black;
   }  
   @keyframes rotate {
    from {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
    }
    to {
     transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
    }
   }
  </style>

효과를 보려면 그림을 보세요:

# 🎜🎜## 🎜🎜#

위 내용은 순수 CSS 코드를 사용하여 회전하는 태극권 다이어그램을 그리는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!