如何使一個字體真棒微調四處走動的圓形圖片

Question

我有一個圓形圖像置於div標記。現在我想在這個圖像上放置一個字體超棒的微調器。

我正在尋找的效果是旋轉圖像邊框，例如this spinner icon。

微調器和圖像必須具有相同的半徑。

該解決方案可以不使用字體超棒的微調器，而是使用純粹的CSS3。

Answer 1

字體真棒可以做的工作適合你，但如果你想使任何HTML元素不斷地旋轉，你可以使用@keyframes rule —通過@-webkit-keyframes Safari瀏覽器支持—補充定義旋轉行爲。使用animation property將此行爲應用於HTML元素。

以下片段定義了rotating動畫並將其應用於.circle。 .circle元素和圖像與position: absolute一起放置，以便圓圈繞過圖像。

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

 
.circle { 
 
    animation: rotating 2.5s linear infinite; 
 
    position: absolute; 
 
    left: -15px; 
 
    top: -15px; 
 
} 
 

 
#demo { 
 
    padding: 40px; 
 
    color: #222; 
 
    margin: 40px; 
 
    position: relative; 
 
    font-size: 130px; 
 
} 
 

 
#demo img { 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
<div id="demo"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_Fe2cRDzAEE4mE5DDxYsbx9Emt2aQYVs-kmsDnOc8PeHOSlYV" /> 
 
    <div class="circle fa fa-circle-o-notch"></div> 
 
</div>

Answer 2

用途：

<i class="fa fa-spinner fa-circle-o-notch"><img href="your-image" id="image"></img></i> 

並添加到您的CSS：

#image { 
    display: inline; 
} 

看那examples 並顯示docs。