كود css جعل الصور الشخصية بشكل دائري ببيانات العضو

@keyframes shapeChange {
  0% {
    clip-path: circle(50%);
  }
  50% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: circle(50%);
  }
}

.poster-profile.postdetails img {
  background: #fff;
  border: 2px solid;
  font-weight: lighter;
  padding: 5px;
  animation: shapeChange 3s infinite;
  box-shadow: 0 0px 4px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
  display: inline-block;
  height: 100px;
  overflow: hidden;
  margin: 10px 0;
  width: 100px;
  text-align: center;
}

@keyframes shapeChange {
  0% {
    clip-path: circle(50%);
  }
  50% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: circle(50%);
  }
}

.avatar-big img, .avatar-default img, #header-user img, .avatar-mini img, .cb-avatar img, .mod-login-avatar img {
  background: #fff;
  border: 2px solid;
  font-weight: lighter;
  padding: 5px;
  animation: shapeChange 3s infinite;
  box-shadow: 0 0px 4px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
  display: inline-block;
  height: 100px;
  overflow: hidden;
  margin: 10px 0;
  width: 100px;
  text-align: center;
}

@keyframes shapeChange {
0% {
clip-path: circle(50%);
}
50% {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: circle(50%);
}
}

.postprofile-avatar img {
background: #fff;
border: 2px solid;
font-weight: lighter;
padding: 5px;
animation: shapeChange 3s infinite;
box-shadow: 0 0px 4px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
display: inline-block;
height: 100px;
overflow: hidden;
margin: 10px 0;
width: 100px;
text-align: center;
}