सर्कल के चारों ओर शीर्ष सीमा को घुमाने के लिए कैसे?

Question

मैं इस सीएसएस एनीमेशन को प्राप्त करने की कोशिश कर रहा हूं लेकिन यह नहीं जानता कि इसे कैसे किया जाए। मैं सर्कल के चारों ओर शीर्ष सीमा को घुमाने के लिए चाहता हूं लेकिन पूरी चीज पाठ सहित घूर्णन कर रही है। मैं बस 360 डिग्री पर शीर्ष सीमा घुमाने के लिए चाहता हूँ। यहाँ मेरी कोड के नीचे छोटा सा अंश है:

div#skill { 
 
    /*background: url(../img/white.jpg) center no-repeat; 
 
    background-size: cover;*/ 
 
    background-color: rgba(144, 0, 64,0.8); 
 
    color: #fff; 
 
    padding: 10px 0; 
 
} 
 

 
div#skill h3 { 
 
    color: #fff; 
 
    text-transform: none; 
 
} 
 

 
div#skill .row { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
    padding: 15px 150px; 
 
} 
 

 
div#skill .circle { 
 
    height: 120px; 
 
    width: 120px; 
 
    border: 5px solid #ccc; 
 
    border-top-color: orange; 
 
    border-radius: 60px; 
 
    background-color: #74002f; 
 
    /*Making the top border to spin*/ 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
div#skill .circle:after { 
 
    content: url(../img/icons/arrow-point-to-right.png); 
 
    position: absolute; 
 
    top: 25px; 
 
    right: 0; 
 
} 
 

 
div#skill .circle.last:after{ 
 
    display: none; 
 
} 
 

 
.circle .caption { 
 
    font-weight: bold; 
 
    padding: 20px 24px; 
 
} 
 

 
.caption h6 { 
 
    font-size: 15px; 
 
} 
 

 

 
/*Animation on circle*/ 
 
@keyframes spin { 
 
    from {transform: rotate(0deg);} 
 
    to {transform: rotate(360deg);} 
 
}

<div id="skill"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12 text-center"> 
 
        <h3>My development process</h3> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-md-3"> 
 
        <div class="circle"> 
 
         <div class="caption text-center"> 
 
          <h6>1</h6> 
 
          <h6>Concept</h6> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <div class="circle"> 
 
         <div class="caption text-center"> 
 
          <h6>2</h6> 
 
          <h6>Design</h6> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <div class="circle"> 
 
         <div class="caption text-center"> 
 
          <h6>3</h6> 
 
          <h6>Code</h6> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <div class="circle last"> 
 
         <div class="caption text-center"> 
 
          <h6 class="text-center">4</h6> 
 
          <h6 class="text-center">Launch</h6> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-md-6"> 
 
        <h3>about my skills</h3> 
 
       </div> 
 
       <div class="col-md-6"> 
 
        
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

कृपया मेरी मदद करो बाहर! वास्तव में आपकी मदद की सराहना करेंगे। अग्रिम धन्यवाद!

Answer 1

div#skill { 
 
    /*background: url(../img/white.jpg) center no-repeat; 
 
    background-size: cover;*/ 
 
    background-color: rgba(144, 0, 64, 0.8); 
 
    color: #fff; 
 
    padding: 10px 0; 
 
} 
 
div#skill h3 { 
 
    color: #fff; 
 
    text-transform: none; 
 
} 
 
div#skill .row { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
    padding: 15px 150px; 
 
} 
 
div#skill .circle { 
 
    height: 120px; 
 
    width: 120px; 
 
    border: 5px solid #ccc; 
 
    border-top-color: orange; 
 
    border-radius: 50%; 
 
    background-color: #74002f; 
 
    /*Making the top border to spin*/ 
 
    animation: spin 2s linear infinite; 
 
} 
 
div#skill .circle:after { 
 
    content: url(../img/icons/arrow-point-to-right.png); 
 
    position: absolute; 
 
    top: 25px; 
 
    right: 0; 
 
} 
 
div#skill .circle.last:after { 
 
    display: none; 
 
} 
 
.circle .caption { 
 
    font-weight: bold; 
 
    padding: 20px 24px; 
 
} 
 
.caption h6 { 
 
    font-size: 15px; 
 
} 
 
/*Animation on circle*/ 
 

 
@keyframes spin { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
.col-md-3 { 
 
    position: relative; 
 
} 
 
.caption { 
 
    position: absolute; 
 
    z-index: 10; 
 
    text-align: center; 
 
    left: 65px; /* (120px width + 5+5px border)/2 */ 
 
    transform: translate(-50%, 0); 
 
}

<div id="skill"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 text-center"> 
 
     <h3>My development process</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <div class="caption text-center"> 
 
      <h6>1</h6> 
 
      <h6>Concept</h6> 
 
     </div> 
 
     <div class="circle"> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <div class="caption text-center"> 
 
      <h6>2</h6> 
 
      <h6>Design</h6> 
 
     </div> 
 
     <div class="circle"> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <div class="caption text-center"> 
 
      <h6>3</h6> 
 
      <h6>Code</h6> 
 
     </div> 
 
     <div class="circle"> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <div class="caption text-center"> 
 
      <h6 class="text-center">4</h6> 
 
      <h6 class="text-center">Launch</h6> 
 
     </div> 
 
     <div class="circle last"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <h3>about my skills</h3> 
 
     </div> 
 
     <div class="col-md-6"> 
 

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

Answer 2

समाधान एक और div कि position:absolute; साथ .circle है कि यह कैसे, "ले" होगा .circle आकार लेकिन .circle सामग्री नहीं होता है के पीछे हो जाएगा बनाने के लिए है।

div#skill { 
 
    /*background: url(../img/white.jpg) center no-repeat; 
 
    background-size: cover;*/ 
 
    background-color: rgba(144, 0, 64,0.8); 
 
    color: #fff; 
 
    padding: 10px 0; 
 
} 
 

 
div#skill h3 { 
 
    color: #fff; 
 
    text-transform: none; 
 
} 
 

 
div#skill .row { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
    padding: 15px 150px; 
 
} 
 

 
div#skill .circle { 
 
    position:relative; 
 
    height: 120px; 
 
    width: 120px; 
 
    border: 5px solid #ccc; 
 
    /*border-top-color: orange;*/ 
 
    border-radius: 50%; 
 
    background-color: #74002f; 
 
} 
 

 
div#skill .circle:after { 
 
    content: url(../img/icons/arrow-point-to-right.png); 
 
    position: absolute; 
 
    top: 25px; 
 
    right: 0; 
 
} 
 

 
div#skill .circle.last:after{ 
 
    display: none; 
 
} 
 

 
.circle .caption { 
 
    font-weight: bold; 
 
    padding: 20px 24px; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 

 
.caption h6 { 
 
    font-size: 15px; 
 
} 
 

 
.circle-rotate { 
 
    height: 100%; 
 
    width: 100%; 
 
    border-top: 5px solid orange; 
 
    border-radius: 60px; 
 
    background-color: #74002f; 
 
    /*Making the top border to spin*/ 
 
    animation: spin 2s linear infinite; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 

 

 
/*Animation on circle*/ 
 
@keyframes spin { 
 
    from {transform: rotate(0deg);} 
 
    to {transform: rotate(360deg);} 
 
}

<div id="skill"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 text-center"> 
 
     <h3>My development process</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <div class="circle"> 
 
      <div class="circle-rotate"></div> 
 
      <div class="caption text-center"> 
 
      <h6>1</h6> 
 
      <h6>Concept</h6> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <div class="circle"> 
 
      <div class="caption text-center"> 
 
      <h6>2</h6> 
 
      <h6>Design</h6> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <div class="circle"> 
 
      <div class="caption text-center"> 
 
      <h6>3</h6> 
 
      <h6>Code</h6> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <div class="circle last"> 
 
      <div class="caption text-center"> 
 
      <h6 class="text-center">4</h6> 
 
      <h6 class="text-center">Launch</h6> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <h3>about my skills</h3> 
 
     </div> 
 
     <div class="col-md-6"> 
 

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