border-radius与随机不规则圆角效果实例页面

展示

代码

• HTML：

  <img class="avatar" src="1.jpg">
  <img class="avatar" src="2.jpg">
  <img class="avatar" src="3.jpg">
  <img class="avatar" src="4.jpg">
  <img class="avatar" src="5.jpg">
  <img class="avatar" src="6.jpg">

• CSS：

  .avatar {
      width: 100px; height: 100px;
      border-radius: 50%;
      object-fit: cover;
      animation: morph 6s paused linear;
      border: solid deepskyblue;
  }
  
  @keyframes morph {
      0% { 
          border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
          transform: rotate(-5deg);
      }
      100% { 
          border-radius: 40% 60%;
          transform: rotate(5deg);
      } 
  }
  .avatar:nth-child(4n) {
      animation-delay: -3.5s;
  }
  .avatar:nth-child(2n+1) {
      animation-delay: -1s;
  }
  .avatar:nth-child(3n+2) {
      animation-delay: -2s;
  }
  .avatar:nth-child(5n+3) {
      animation-delay: -3s;
  }
  .avatar:nth-child(7n+5) {
      animation-delay: -4s;
  }
  .avatar:nth-child(11n+7) {
      animation-delay: -5s;
  }