技巧-圆形放大的hover效果

使用3层 元素 实现 鼠标经过的放大效果。涉及到定位，背景图片，伪元素，继承，裁剪，鼠标经过，过渡效果等。

    <div class="avatar"></div>

.avatar {
  background-image: url("@/assets/imgs/pic.jpg");
  background-size: cover;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0; //表示top 0 left 0 right 0 bottom 0
    border-radius: inherit;
  }

  &::before {
    background: rgba($color: #000000, $alpha: 0.65);
  }
  &::after {
    background: inherit;
    clip-path: circle(0% at 50% 50%); // 参数 半径，圆心
    transition: 0.3s;
  }
  &:hover::after {
    clip-path: circle(50% at 50% 50%);
  }
}