Forum - Avatare bearbeiten

<style>
:root {
  --inset: 0.2vmin;
  --color0: #0ac;
  --color1: #222;
  --duration: 5s;
  --bgcolor0: #0aca;
  --bgcolor1: #222a;
}
 
.messageAvatar {
  block-size: 8vmin;
  inline-size: 8vmin;
  display: grid;
  place-items: center;
  rotate: 45deg;
  overflow: hidden;
  box-shadow: inset 0 0 5px black, 0 0 5px black;
  filter: drop-shadow(0 0 10px var(--color0)) saturate(2);
  margin: 30px auto;
}
.messageAvatar img {
  height:100px;  
  width:100px; 
}
.messageAvatar:hover span {
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  -webkit-clip-path: inset(var(--inset));
          clip-path: inset(var(--inset));
}
.messageAvatar:hover span img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  rotate: -45deg;
  scale: 1.3;
  transition: all 2s;
}
.messageAvatar:hover::before {
  content: '';
  display: block;
  inline-size: 100%;
  block-size: 100%;
  position: absolute;
  background: repeating-conic-gradient(transparent, var(--color0) 25deg, var(--color1) 22.5deg, transparent 90deg);
  -webkit-animation: var(--duration) f linear infinite;
          animation: var(--duration) f linear infinite;
  scale: 1.6;
}
@-webkit-keyframes f {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 1turn;
  }
}
@keyframes f {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 1turn;
  }
}
@supports not (rotate: 0deg) {
  .messageAvatar {
    transform: rotate(45deg);
  }
  .messageAvatar span img {
    transform: rotate(-45deg) scale(1.6);
  }
  .messageAvatar::before {
    transform: scale(1.6);
    -webkit-animation-name: g;
            animation-name: g;
  }
  @-webkit-keyframes g {
    0% {
      transform: rotate(0) scale(1.6);
    }
    100% {
      transform: rotate(1turn) scale(1.6);
    }
  }
  @keyframes g {
    0% {
      transform: rotate(0) scale(1.6);
    }
    100% {
      transform: rotate(1turn) scale(1.6);
    }
  }
}
</style>
 
<script>
{{message.startlist}}
window.addEventListener('load', function(){
  avatar = $('#post{{message:pt}} #mavatar{{message:pt}}').html();  
  $('#post{{message:pt}} .messageAvatar').html('<span>'+avatar+'</span>'); 
});
{{message.end}}
</script>
 

<style>
.messageAvatar img{
  height: 130px;
  width: 130px;
  border-radius: 50%;
  position: relative;
  object-fit: cover;
  border: 5px solid transparent;
  z-index:999997;
}
.sidebarcontent:hover .messageAvatar::before {
  content: "";
  background: linear-gradient(180deg, #7494bc 70%, rgba(255, 255, 255, 0.85));
  border-radius: 50%;
  height: 140px;
  width: 140px;
  position: absolute;
  z-index: 999996;
  animation: avatar-rotate 3s linear infinite; 
}
.project {
  display: flex;
  justify-content: center;
  color: #ffffff;
  font-family: sans-serif;
  font-weight: bold;
  background: #aa0000;
  padding: 5px;
  border: 2px solid #0e0e10;
  border-radius: 10px;
  z-index: 999998;
  margin:5px 50px;
}
 
@keyframes avatar-rotate {
  to {
    transform: rotate(360deg);
  }
}
</style>