LoginSignup
14

More than 5 years have passed since last update.

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

Posted at

sampleGif.gif

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

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;
  }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14