如何使超棒的微调框围绕圆形图片旋转

Question

我将圆形图像放置在div标签中。 现在，我想在该图像上放置一个超棒的微调框。

我要寻找的效果是使旋转图像边框，例如使用此微调器图标 。

微调器和图像必须具有相同的半径。

该解决方案可以不使用字体令人赞叹的微调器，而是使用纯CSS3。

Answer 1

采用：

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

并将其添加到您的css：

#image {
    display: inline;
}

查看示例并显示docs 。

Answer 2

Font Awesome可以为您完成工作，但是如果您希望使HTML元素无限旋转，可以使用@keyframes规则 （由Safari支持的@-webkit-keyframes补充）来定义旋转行为。 使用animation属性将此行为应用于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>