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

Question

我在一个网站上工作，我不知道如何使图像围绕静态徽标无限旋转。

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

我在谷歌上搜索了很多文章，但没有一篇是我想要的。

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

Answer 1

基于答案How to animate image circle 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/

Answer 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;
}

Answer 3

据我了解，您需要像月亮绕地球旋转这样的效果。 您将能够使用 CSS 动画和transform-origin属性来做到这一点。

变换原点改变你的对象的旋转点。 通常变换原点位于对象的中心，但更改变换原点的 X 和 Y 属性，您将能够更改旋转点。

这是一个例子

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

用您想要的图像替换span.img

希望能帮到你！