CSS 図形が要素内を回るエフェクト

要素にマウスが乗るとアニメーションさせる

html

<a href="#">Anchor</a>

css

a{
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  /* テキストを中央寄せ */
  text-align: center;
  line-height: 100px;
}

a:before,a:after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
}

a:before{
  top: 0;
  left: 0;
  background: linear-gradient(to left top,#55BEFC,#55FCBE);
}

a:after{
  bottom: 0;
  right: 0;
  background: linear-gradient(to left top,#FC55BE,#FCBE55);
}

a:hover:before{
  animation: anime_tl 5s linear infinite;
}

a:hover:after{
  animation: anime_br 5s linear infinite;
}

@keyframes anime_tl{
  0%{
    /* 左上 && 開始地点 */
    top: 0;
    left: 0;
  }
  
  25%{
    /* 右上 */
    top: 0;
    left: 100%;
    transform: translateX(-100%);
  }
  
  50%{
    /* 右下 */
    top: 100%;
    left: 100%;
    transform: translate(-100%,-100%);
  }
  
  75%{
    /* 左下 */
    top: 100%;
    left: 0;
    transform: translateY(-100%);
  }
  
  100%{
    /* 左上 && 終了地点*/
    top: 0;
    left: 0;
  }
}

@keyframes anime_br{
  0%{
    /* 右下 && 開始地点*/
    bottom: 0;
    right: 0;
  }
  
  25%{
    /* 左下 */
    bottom: 0;
    right: 100%;
    transform: translateX(100%);
  }
  
  50%{
    /* 左上 */
    bottom: 100%;
    right: 100%;
    transform: translate(100%,100%);
  }

  75%{
    /* 右上 */
    bottom: 100%;
    right: 0;
    transform: translateY(100%);
  }
  
  100%{
    /* 右下 && 終了地点*/
    bottom: 0;
    right: 0;
  }
}