如何实现页面加载时的图片旋转效果？新手技术求助

嘿，作为前端新手遇到这种CSS动画问题太正常啦！我来帮你把hover旋转改成页面加载自动转，先看看你代码里的几个小问题：

• 语法错误：-webkit-transform: rotateY(0deg)后面没加分号，导致后面的过渡属性直接失效了
• 只给元素加了动画名称，但没设置动画时长、循环次数这些关键参数，动画根本跑不起来
• 你的keyframes代码没写完，缺少完整的旋转终点定义

接下来给你一个完整的可运行版本，直接替换你的CSS就行：

.spin-logo {
  height: 450px;
  margin: 0 auto;
  /* 直接给元素绑定动画，页面加载就触发 */
  animation: spinner 5s linear infinite;
  /* 兼容webkit内核老浏览器的前缀写法 */
  -webkit-animation: spinner 5s linear infinite;
}

/* 定义Y轴旋转的动画 */
@keyframes spinner {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* webkit内核浏览器兼容代码 */
@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

我来拆解一下关键部分：

• 把动画直接绑定到.spin-logo类上，不需要hover伪类，这样页面加载时元素一渲染就会触发动画
• animation: spinner 5s linear infinite 这行是动画的简写：
  • spinner：对应我们定义的keyframes动画名称
  • 5s：动画总时长，和你之前的过渡时间保持一致
  • linear：匀速的速度曲线，旋转起来更自然
  • infinite：动画无限循环，如果你想只转一次就改成1
• 保留webkit前缀是为了兼容老版本的Chrome、Safari这类webkit内核浏览器

最后记得给链接aclJ送雪施加难费强那提供语法更快的叶，哦不对，是确保你的图片标签加上了这个类：

<img src="你的logo地址" alt="Logo" class="spin-logo">

这样页面一加载，你的logo就会自动开始360度Y轴旋转啦！

内容的提问来源于stack exchange，提问作者S. Busse