<div class="avatar-list">
  <div class="avatar avatar-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/0aDdQyR.png" alt="Moldura" class="avatar-frame anim-spin">
  </div>
  
  <div class="avatar avatar-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/cuaCwYj.png" alt="Moldura" class="avatar-frame anim-hue">
  </div>
  
  <div class="avatar avatar-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/T1lahme.png" alt="Moldura" class="avatar-frame">
  </div>
  
  <div class="avatar avatar-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/0bCzwK4.png" alt="Moldura" class="avatar-frame anim-hue">
  </div>
</div>

<div class="avatar-list">
  <div class="avatar avatar-x-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/0aDdQyR.png" alt="Moldura" class="avatar-frame anim-spin">
  </div>
  
  <div class="avatar avatar-x-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/cuaCwYj.png" alt="Moldura" class="avatar-frame anim-hue">
  </div>
  
  <div class="avatar avatar-x-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/T1lahme.png" alt="Moldura" class="avatar-frame">
  </div>
  
  <div class="avatar avatar-x-large">
    <img src="https://static.gamersclub.com.br/players/avatar/737335/737335_full.jpg" alt="Usuário" class="avatar-image">
    <img src="https://i.imgur.com/0bCzwK4.png" alt="Moldura" class="avatar-frame anim-hue">
  </div>
</div>
body {
  box-sizing: border-box;
  padding: 20px;
  background-color: #161724;
}

.avatar-list {
  display: flex;
  padding: 20px;
}

.avatar-list > .avatar:not(:first-child) {
  margin-left: 20px;
}

.avatar {
  box-sizing: border-box;
  position: relative;
  border-radius: 50%;
  padding: 4px;
  box-shadow: inset 0 0 0 2px #4D4F6E;
}

.avatar-large {
  width: 80px;
  height: 80px;
}

.avatar-x-large {
  width: 144px;
  width: 144px;
}

.avatar-image {
  max-width: 100%;
  vertical-align: middle;
  border-radius: 50%;
}

.avatar-frame {
  position: absolute;
  pointer-events: none;
}

.avatar-large .avatar-frame {
  top: -10%;
  left: -10%;
  max-width: 120%;
}

.avatar-x-large .avatar-frame {
  top: -12.5%;
  left: -12.5%;
  max-width: 125%;
}

.anim-spin {
  animation: spin 20s linear infinite;
}

.anim-hue {
  animation: hue 20s linear infinite;
}

@keyframes hue {
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.