<div class="shine-pengin">
    <img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" width="200" height="200">
</div>
/*****光るエフェクト***/
.shine-pengin{
  text-decoration: none;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #A4E8DA;
  border-radius: 50%;
  overflow: hidden;
}

/* 光の疑似要素 */
.shine-pengin::before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: skewX(-30deg);
  position: absolute;
  top: 0;
  left: -150%;
  opacity: 0.5;
  animation: shine-anime 2s infinite;
}
/* 光の動き */
@keyframes shine-anime{
  0% {
    left: -150%;
    opacity: 0;
  }
  80% {
    left: -100%;
    opacity: 0.5;
  }
  81% {
    left: -100%;
    opacity: 1;
  }
  100% {
    left: 50%;
    opacity: 0;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.