CSS & JS Effect – Blue Tick Avatar

效果

难点

难题只有一个, 那就是如何把 blue tick image 定位当 avatar 的右下角.

HTML

<div class="avatar-wrapper">
  <img class="avatar" src="../images/avatar.jpg" width="1" height="1" />
  <img class="blue-tick" src="../images/blue-tick.png" width="1" height="1" />
</div>

首先是 2 张图, 一张是 avatar, 一张是 blue tick

要搞定位, 那么就需要一个 offset parent 咯. 所以需要一个 wrapper.

效果

假设图片的 size 是 avatar 256px, blue tick 48px

居中定位

先来个居中

.avatar-wrapper {
  .avatar {
    width: 256px;
    border-radius: 50%;
  }
  position: relative;
  .blue-tick {
    position: absolute;
    width: 48px;
    border-radius: 50%;

    left: 50%;
    top: 50%;
    translate: -50% -50%;
  }
}

注: 我这里用了 translate property, 它是 individual transform properties

效果

Transform 偏移

接下来就是关键操作了.

transform: rotate(45deg) translateX(calc(256px / 2)) rotate(-45deg);

首先做一个 rotate, 调整前行的方向

然后用 translateX 让它前行, 前行的距离是 avatar width 的一半 (半径 radius)

最后在用 rotate 转正

完成!