圆形头像中的资产图像颤动

这是一个有趣而独特的特效，它可以使圆形头像中的资产图像颤动并呈现出一种活泼生动的感觉。对于需要体现用户资产或财富的应用或网站，这种特效会使界面更加生动，增加用户体验。

实现方法

实现这种特效的方法有很多，这里介绍一种基于CSS的实现方法。

HTML部分

首先，在HTML中，需要创建一个圆形头像的容器，同时加上一个资产图像元素。

<div class="avatar">
  <img src="asset.png" alt="资产图像">
</div>

CSS部分

然后，在CSS中，需要对容器和资产图像进行样式设置，并设置关键帧动画。

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.avatar img {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes shake {
  0% {
    transform: rotate(0deg) translate(0);
  }
  10% {
    transform: rotate(3deg) translate(-3px, -3px);
  }
  20% {
    transform: rotate(-3deg) translate(-3px, 3px);
  }
  30% {
    transform: rotate(3deg) translate(3px, 3px);
  }
  40% {
    transform: rotate(-3deg) translate(3px, -3px);
  }
  50% {
    transform: rotate(3deg) translate(-3px, -3px);
  }
  60% {
    transform: rotate(-3deg) translate(-3px, 3px);
  }
  70% {
    transform: rotate(3deg) translate(3px, 3px);
  }
  80% {
    transform: rotate(-3deg) translate(3px, -3px);
  }
  90% {
    transform: rotate(3deg) translate(-3px, -3px);
  }
  100% {
    transform: rotate(0deg) translate(0);
  }
}

.avatar:hover img {
  animation: shake 0.5s both;
}

在这里，我们定义了一个关键帧动画shake，用于产生颤动效果。同时，我们还设置了鼠标悬停时触发动画的效果。

效果演示

最终的效果如下所示：

所以，如果你需要增加界面生动感和用户体验，可以考虑在圆形头像中加入资产图像的颤动特效。