Chỉ xoay đường viền bằng cách sử dụng CSS

Question

Tôi đang cố gắng xoay chỉ đường viền bằng cách sử dụng css nhưng biểu tượng phông chữ cũng đang xoay. Làm cách nào để ngừng xoay vòng biểu tượng và chỉ tạo đường viền?

CSS:

.circle { 
    width: 100px; 
    height: 100px; 
    background: transparent; 
    border-radius: 50%; 
    border: 2px dashed #000; 
-webkit-animation-name: Rotate; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
-moz-animation-name: Rotate; 
-moz-animation-duration: 2s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 
-ms-animation-name: Rotate; 
-ms-animation-duration: 2s; 
-ms-animation-iteration-count: infinite; 
-ms-animation-timing-function: linear; 
} 
.play { 
padding: 20px 30px; 
font-size: 56px; 
} 

@-webkit-keyframes Rotate 
{ 
from{-webkit-transform:rotate(0deg);} 
to{-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes Rotate 
{ 
from{-moz-transform:rotate(0deg);} 
to{-moz-transform:rotate(360deg);} 
} 
@-ms-keyframes Rotate 
{ 
from{-ms-transform:rotate(0deg);} 
to{-ms-transform:rotate(360deg);} 
} 

HTML:

<div class="circle"> 
    <div class="play"><i class="fa fa-play"></i></div> 
</div> 

đâu tôi đi sai với mã này?

DEMO JSFIDDEL

Answer 1

quay mẹ sẽ xoay con cũng vì vậy nó tốt hơn để biên giới phong cách riêng như đây

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.circle .border { 
 
    /* content: ''; */ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: transparent; 
 
    border-radius: 50%; 
 
    border: 2px dashed #000; 
 
    -webkit-animation-name: Rotate; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-name: Rotate; 
 
    -moz-animation-duration: 2s; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-name: Rotate; 
 
    -ms-animation-duration: 2s; 
 
    -ms-animation-iteration-count: infinite; 
 
    -ms-animation-timing-function: linear; 
 
} 
 
.play { 
 
    padding: 20px 30px; 
 
    font-size: 56px; 
 
} 
 
.stop { 
 
    font-size: 12px; 
 
    padding: 30px; 
 
    text-align: center; 
 
} 
 
@-webkit-keyframes Rotate { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes Rotate { 
 
    from { 
 
    -moz-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -moz-transform: rotate(360deg); 
 
    } 
 
} 
 
@-ms-keyframes Rotate { 
 
    from { 
 
    -ms-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -ms-transform: rotate(360deg); 
 
    } 
 
}

<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="play"><i class="fa fa-play"></i> 
 
    </div> 
 
</div> 
 

 
<p> 
 
    PS: The icon loading is a bit slow. Wait until it shows up. 
 
</p> 
 

 
<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="stop">Stop me please</div> 
 
</div>

Answer 2

<div class="button-container"> 
    <i class="fa fa-play button-icon"></i> 
    <div class="button-border"></div> 
</div> 

Bạn có thể tìm thấy một phiên bản cập nhật của mẫu của bạn tại đây JSFiddle