CSS 애니메이션 원형 서클 하나의 원에

각 서클을 결합하여 하나의 원을 그리며 세 번째로 회전 시키려면 ......CSS 애니메이션 원형 서클 하나의 원에

또한 원 위에 서클의 중심을 어떻게 배치합니까? text-align : center;를 사용해 보았습니다. 하지만 난 그것을 appriciate 나던 작업 .....

덕분에 내가

.loader { 
 
    border: 16px solid #f3f3f3; /* Light grey */ 
 
    border-top: 16px solid greenyellow; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
.loader2 { 
 
    border: 16px solid #f3f3f3; /* Light grey */ 
 
    border-top: 16px solid palevioletred; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
.loader3 { 
 
    border: 16px solid #f3f3f3; /* Light grey */ 
 
    border-top: 16px solid purple; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

<div class="col-lg-12"> 
 

 
     
 

 
     <div class="col-lg-4"> 
 
      <p class="textcentre">1</p> 
 
      <div class="loader"></div> 
 
     </div> 
 

 
     <div class="col-lg-4"> 
 
      <p class="textcentre">2</p> 
 
      <div class="loader2"></div> 
 
     </div> 
 

 
     <div class="col-lg-4"> 
 
      <p class="textcentre">3</p> 
 
      <div class="loader3"></div> 
 
     </div> 
 

 
     
 

 
    </div> 
 
    s 
 
    <div> 
 
    
 
    </div> 
 
</div> 
 
</div>

출처

2017-11-23 joe m

당신은 당신이 하나 원의 세 가지 색상이 원하는 것을 의미 않았다 "각 _so은 하나의 circle_ 주위를 회전하는 세 번째"? –

충분히 명확하게 해주시겠습니까 –

아래 여기에 코드를 보여이 당신이 원하는 무엇인가!

.loader { 
 
    border: 16px solid #f3f3f3; /* Light grey */ 
 
    border-top: 16px solid greenyellow; /* Blue */ 
 
    border-bottom: 16px solid palevioletred; /* Blue */ 
 
    border-right: 16px solid purple; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    animation: spin 2s linear infinite; 
 
} 
 
.wrapper { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

<div class="col-lg-12"> 
 
    <div class="col-lg-4"> 
 
     <div class="wrapper"> 
 
      <p>1</p> 
 
      <div class="loader"></div> 
 
     </div> 
 
    </div> 
 
</div>

텍스트를 중심으로

업데이트

출처

2017-11-23 10:25:02

3 위가 아닌 4 위입니다. – wscourge

.section { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.circle { 
 
    border: 0.3rem solid #ffbb00; 
 
    border-top: 0.3rem solid #7cbb00; 
 
    border-bottom: 0.3rem solid #00a1f1; 
 
    border-right: 0.3rem solid #f65314; 
 
    border-radius: 50%; 
 
    width: 150px; 
 
    height: 150px; 
 
    animation: spin 1s linear infinite; 
 
} 
 
@keyframes spin { 
 
    100% { transform: rotate(-360deg); } 
 
    0% { transform: rotate(0deg); } 
 
}

<div class="section"> 
 
    <h5 class="header">CENTER TITLE</h5> 
 
    <div class="circle"></div> 
 
</div>

출처

2017-11-23 11:18:42

CSS 애니메이션 원형 서클 하나의 원에

답변

관련 문제