来电按钮特效

css:

.bless-play-btn{
  border-radius: 9999px;
}

.animation-call {
  overflow: hidden;
  animation: vibration 1s ease-in infinite;
}

.ani-circle-1{
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  animation-delay: 0s;
}
.ani-circle-2{
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  animation-delay: 0.4s;
}
.ani-circle-3{
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  animation-delay: 0.9s;
}
@keyframes ping {
  75%, 100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes vibration {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(20deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-15deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

html:

 <div className="relative w-75px h-75px">
            <div className="ani-circle-1 absolute inset-0 size-75px rounded-full bg-white bg-opacity-30"></div>
            <div className="ani-circle-2 absolute inset-0 size-75px rounded-full bg-white bg-opacity-30"></div>
            <div className="ani-circle-3 absolute inset-0 size-75px rounded-full bg-white bg-opacity-30"></div>
      <div
        className={[
          'bless-play-btn w-75px h-75px mb-9px cursor-pointer',
          'border-4px border-[#FDCA94] rounded-full'
        ]}
        style={{
          background: `url('http://p0.qhimg.com/t01db95255af7acdc58.png') center center / cover no-repeat`,
        }}
      >
      </div>
 </div>