如何在颤动中制作包含在圆形头像中的图像

在Web开发中，有时我们需要在圆形头像中显示用户的图像。在此过程中，我们还可以增加一些动态效果，例如颤动效果，使用户的头像看起来更生动有趣。下面，我们将介绍一种制作包含在圆形头像中的图像并增加颤动效果的方法。

HTML和CSS代码

首先，我们需要创建一个 div 容器来包含圆形头像。接下来，我们将创建一个 img 标签来显示用户的图像。同时，我们还需要一些CSS样式来设置图像的大小，位置，以及圆形边框。

<div class="avatar-container">
  <img src="user-avatar.jpg" alt="User avatar">
</div>

<style>
.avatar-container {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

</style>

JavaScript代码

接下来，我们需要编写一些JavaScript代码来实现颤动效果。我们将使用 setInterval 函数来定时更改图像位置的偏移量。同时，我们还需要一些CSS样式来设置图像的初始位置和偏移量。

<div class="avatar-container">
  <img src="user-avatar.jpg" alt="User avatar">
</div>

<style>
.avatar-container {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;

  /* 设置初始位置和偏移量 */
  transform: translate3d(0, 0, 0);
  animation: shake 0.5s ease-in-out infinite;
}

/* 设置颤动效果 */
@keyframes shake {
  0% {
    transform: translate3d(0, 0, 0);
  }
  10% {
    transform: translate3d(-10px, 0, 0);
  }
  20% {
    transform: translate3d(10px, 0, 0);
  }
  30% {
    transform: translate3d(-10px, 0, 0);
  }
  40% {
    transform: translate3d(10px, 0, 0);
  }
  50% {
    transform: translate3d(-10px, 0, 0);
  }
  60% {
    transform: translate3d(10px, 0, 0);
  }
  70% {
    transform: translate3d(-10px, 0, 0);
  }
  80% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-10px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
</style>

<script>
// 设置 setInterval
setInterval(function() {
  var img = document.querySelector('.avatar-container img');
  img.style.transform = 'translate3d(0, 0, 0)';
}, 500);
</script>

结论

以上就是制作包含在圆形头像中的图像并增加颤动效果的方法。我们通过HTML和CSS代码创建了一个圆形头像容器，并使用JavaScript代码实现了颤动效果。