如何使图像围绕静态徽标旋转？答案

【问题标题】：How to make an image rotating around static logo?如何使图像围绕静态徽标旋转？
【发布时间】：2019-08-26 22:46:35
【问题描述】：

我正在开发一个网站，但我不知道如何让图像围绕静态徽标无限旋转。

我没有任何代码，因为我不熟悉网络编码，所以如果这里有人可以提供codepen或jsfiddle？我的网站 100% 使用 html、css 和 js。

我在谷歌上搜索了很多文章，但没有一篇完全符合我的要求。

我希望有一个带有 CSS 和 JS 的 HTML 代码

【问题讨论】：

代码在哪里？？
你为什么不用 GIF？
这里stackoverflow.com/questions/35749909/…
或在这里：useragentman.com/blog/2013/03/03/…
您以某种方式误解了 SO 的工作原理。这不是免费的代码编写服务，我们正在解决您在编写代码时遇到的问题。

标签： javascript html css

【解决方案1】：

根据答案 How to animate image circular in css

您可以执行以下操作：

HTML：

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

CSS：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

那个人还加了一个jsFiddle链接让你看看上面的效果。 http://jsfiddle.net/aquadk/m23sadrz/

【讨论】：

与原始答案相比，此答案没有引入任何新内容，而是投票关闭作为副本而不是复制另一个答案。
同意我只是认为我可以为需要它的人节省额外的点击。但关闭是更好的选择（最好可以与原始选项合并）:)

【解决方案2】：

一种简单的方法是向您的图像元素添加一个 CSS 类并使用关键帧动画。

https://codepen.io/limxz/pen/GLZdJN

从演示中可以看出，您必须定义一个关键帧（它有点像动画序列），然后添加参数来控制它。

@keyframes infinite-spinning {
  0%{
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.image-to-spin {
  animation: infinite-spinning 1s infinite;
}

【讨论】：

【解决方案3】：

据我了解，您需要像月亮绕地球旋转一样的效果。您将可以使用 CSS 动画和 transform-origin 属性来实现。

transform-origin 改变物体的旋转点。通常transform-origin 位于对象的中心，但是改变transform-origin 的X 和Y 属性可以改变旋转点。

here is a example

<div class="logo-wrapper">
    <h1>LOGO</h1>
    <span class="img"></span>
</div>

用你想要的图片替换span.img

希望对您有所帮助！

【讨论】：