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

Posted 2023-03-06

【中文标题】如何使图像围绕静态徽标旋转？

【英文标题】：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？

这里***.com/questions/35749909/…

或在这里：useragentman.com/blog/2013/03/03/…

您以某种方式误解了 SO 的工作原理。这不是免费的代码编写服务，我们正在解决您在编写代码时遇到的问题。

【参考方案1】：

根据答案 How to animate image circular in css

您可以执行以下操作：

HTML：

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

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

希望对您有所帮助！