如何使用 HTML 和 CSS 创建摆动的 Image Hanger？

本文将教你如何使用HTML和CSS创建一个摆动的图片挂钩，让图片看起来更加生动有趣。

HTML 结构

首先，我们需要在HTML中创建一个结构，来放置图片和图片挂钩。

我们将使用以下基本HTML结构：

<div class="hanger">
  <div class="image">
    <img src="your-image-source-here.jpg" alt="Your Image">
  </div>
  <div class="hook"></div>
</div>

在这个结构中，我们使用 div 元素创建了一个容器 hanger，其中包含两个元素： image 和 hook。

我们将把图片放在 image 容器中，用 hook 容器来创建挂钩。我们将在 hook 中添加一些CSS，使其产生摆动的效果。

CSS 样式

接下来，我们需要添加样式来制作摆动的效果。

首先，让我们为包含图片的容器 image 添加CSS样式，以便将图片放置在正确的位置。例如：

.image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

这将使图片居中对齐，且始终在 hanger 容器的顶部。

接下来，我们需要为挂钩添加CSS样式，使其具有非常简单的摆动效果。我们可以通过使用 transform 属性来实现这一点。我们将使用 rotate 值来旋转我们的挂钩，这将使其具有摆动的动画效果。

例如：

.hook {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(4deg);
  width: 5px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  animation: swing 2s ease-in-out infinite alternate;
}

@keyframes swing {
  0% {
    transform: translateX(-50%) rotate(4deg);
  }
  100% {
    transform: translateX(-50%) rotate(-4deg);
  }
}

其中，我们使用 position 属性将挂钩定位在容器底部。我们将挂钩放置在容器中心，使用 rotate 属性旋转她。我们为挂钩设置了 width 和 height ，并使用黑色的背景来模拟挂钩。

最后，我们通过使用使用CSS的 animation 属性，为挂钩创建一个无限运行的动画（摆动效果），并通过键为 swing 的 @keyframes 规则来定义动画的细节。我们设置了两个不同的旋转角度，用于创建牵动的动态效果。

完整代码

HTML

<div class="hanger">
  <div class="image">
    <img src="your-image-source-here.jpg" alt="Your Image">
  </div>
  <div class="hook"></div>
</div>

CSS

.hanger {
  position: relative;
  width: 200px;
  height: 200px;
}

.image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.hook {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(4deg);
  width: 5px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  animation: swing 2s ease-in-out infinite alternate;
}

@keyframes swing {
  0% {
    transform: translateX(-50%) rotate(4deg);
  }
  100% {
    transform: translateX(-50%) rotate(-4deg);
  }
}

以上就是我们如何使用HTML和CSS创建摆动的图片挂钩，让图片看起来更加生动有趣的介绍。您可以根据自己的需要调整CSS规则，以创建您自己的摆动效果。