css 头像装扮图 播放动画

CSS头像装扮图和播放动画是网页设计的常见技巧。通过巧妙的CSS编码和动画效果，可以使网页更加生动有趣。

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-image: url('avatar.jpg');
  background-size: cover;
  Box-shadow: 0px 0px 5px rgba(0,0.3);
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.1);
  Box-shadow: 0px 0px 10px rgba(0,0.5);
}

.avatar:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0.5);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.avatar:hover:after {
  opacity: 1;
}

.avatar:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: #c6426e;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%,0) skew(-20deg);
  animation: before 1s linear infinite;
}

@keyframes before {
  0% {
    transform: translate(-50%,0) skew(-20deg);
  }
  50% {
    transform: translate(50%,0) skew(-20deg);
  }
  100% {
    transform: translate(-50%,0) skew(-20deg);
  }
}

以上代码实现了一个头像装扮图的效果。当鼠标悬停在头像上时，头像会有一定的放大效果和阴影效果。同时，头像上会有一层半透明黑色蒙版，突出头像的轮廓，增强头像的立体感。另外，头像上还添加了一个抽象的粉色图案，通过CSS skew()函数和animation动画实现了图案的位移效果，提高设计的观赏性。