Как сделать шрифт-удивительный прядильщик обойти круговое изображение

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.