CSS动画中的z-index问题：图片框架摆动动画实现求助

Hey there! 很高兴你终于来发帖提问啦😉 我明白你想给生产站点的图片加带左右摆动动画的框架，这种小细节确实能让页面生动不少。我来给你一套直接能用的实现方案，应该能解决你的问题：

1. HTML结构 #

先给图片套一个容器作为框架载体：

<div class="image-frame">
  <img src="your-image-url.jpg" alt="图片描述文本" class="frame-image">
</div>

2. CSS样式与动画 #

接下来定义框架的视觉样式和摆动动画：

/* 框架容器基础样式 */
.image-frame {
  display: inline-block; /* 让容器贴合图片尺寸，不占整行 */
  padding: 12px; /* 控制框架的厚度，可按需调整 */
  border: 2px solid #333; /* 框架边框颜色和粗细 */
  border-radius: 6px; /* 可选：给框架加圆角 */
  background-color: #f5f5f5; /* 框架的背景色 */
  /* 优化动画流畅度 */
  transform-style: preserve-3d;
  perspective: 800px;
}

/* 图片自适应样式 */
.frame-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px; /* 可选：给图片加圆角 */
}

/* 定义左右摆动的动画关键帧 */
@keyframes swing-animation {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(2.5deg); }
  40% { transform: rotate(0deg); }
  60% { transform: rotate(-2.5deg); }
  80% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* 给框架添加动画 */
.image-frame {
  animation: swing-animation 2.5s ease-in-out infinite;
}

• 仅hover时触发动画：如果不想让框架一直摆动（避免干扰用户），可以把动画规则改成hover状态触发，更适合生产环境：

.image-frame:hover {
  animation: swing-animation 2.5s ease-in-out infinite;
}

• 调整摆动幅度/速度：修改@keyframes里的rotate角度（比如改成4deg），或者动画时长（比如改成3s）就能自定义摆动的幅度和快慢。
• 修改框架样式：调整padding、border、background-color这些属性，就能适配你站点的设计风格。

如果还有细节需要调整，比如动画的缓动效果、框架的阴影之类的，随时告诉我就行！

内容的提问来源于stack exchange，提问作者practical