<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.