링크 호버 애니메이션 효과를 얻기 위한 CSS3 Cubic-Bezier() 방법 소개-CSS 튜토리얼-php.cn

링크 호버 애니메이션 효과를 얻기 위한 CSS3 Cubic-Bezier() 방법 소개

青灯夜游

풀어 주다： 2020-12-17 09:49:54

앞으로

2446명이 탐색했습니다.

링크 호버 애니메이션 효과를 얻기 위한 CSS3 Cubic-Bezier() 방법 소개

CSS3 애니메이션 전환을 사용하여 링크 위로 마우스를 가져갈 때 작은 팝업이 나타나는 간단하면서도 매력적인 링크 호버 효과를 만들어 보겠습니다.

또한 팝오버에 딱딱한 기계적 모션 대신 부드러운 모션을 제공하는 CSS 전환인 CSS3 Cubic-Bezier Curves도 살펴보겠습니다.

(추천 튜토리얼: CSS 비디오 튜토리얼)

이것이 최종 효과입니다:

링크 호버 애니메이션 효과를 얻기 위한 CSS3 Cubic-Bezier() 방법 소개

시작해 봅시다!

HTML 부분

이것은 우리 링크의 HTML이며 아이콘은 iconfont.cn에서 가져온 것입니다.

<p>
  <section>
    <a>
      <i></i>
      <span>Instagram</span>
    </a>
    <a>
      <i></i>
      <span>Github</span>
    </a>
  </section>
</p>

로그인 후 복사

링크 위에 마우스를 올리면 스팬 태그가 팝업으로 표시됩니다. 다음으로 CSS를 살펴보겠습니다.

CSS 스타일 및 애니메이션

두 링크가 화면 중앙에 오도록 p 컨테이너를 중앙에 배치합니다. 또한 작은 팝업이 링크 상단에서 팝업되므로 쉽게 애니메이션을 적용할 수 있습니다.

p.container {
  display: inline-block;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

로그인 후 복사

다음으로 링크 스타일을 지정하고, 간단한 배경 호버 효과를 만들고, 소셜 미디어 아이콘을 배치합니다.

a {
  color:#fff;
  background: #8a938b;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  padding-top:12px;
  margin:0 2px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
}a:hover {
  background: #5a665e;
}i{
  font-size: 45px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 20%;
}

로그인 후 복사

다음으로 팝업 텍스트의 스타일을 지정하고 애니메이션을 적용하겠습니다.

a span {
  color:#666;
  position:absolute;
  font-family: 'Chelsea Market', cursive;
  bottom:0;
  left:-15px;
  right:-15px;
  padding: 15px 7px;
  z-index:-1;
  font-size:14px;
  border-radius:5px;
  background:#fff;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}/* 当图标处于悬停状态时，文本将弹出 */
a:hover span {
  bottom: 130px;
  visibility:visible;
  opacity:1;
}

로그인 후 복사

CSS3 Cubic-Bezier곡선은 4개의 점 p0, p1, p2 및 p3으로 정의됩니다. p0점은 곡선의 시작점이고 p3점은 곡선의 끝점입니다. 곡선이 선형일수록 움직임이 더 뻣뻣해지거나 덜 유동적입니다.

처음에 한 점이 양수이고 다음 점이 음수이면 처음에는 동작이 느려집니다. 포인트 값이 이전 포인트 값보다 높아지면 이동 속도가 빨라집니다.

이것이 CSS에서 Cubic-Bezier 포인트가 의미하는 것입니다. 애니메이션이 짧기 때문에 움직임이 미묘합니다. 팝오버는 사각형 하단에서 천천히 시작된 다음 상단을 향해 가속되기 시작합니다.

큐빅-베지어 곡선 전환 없이 애니메이션을 만들 수 있지만 애니메이션의 차이점은 다음과 같습니다.

큐빅-베지어 곡선 전환이 있는 애니메이션

링크 호버 애니메이션 효과를 얻기 위한 CSS3 Cubic-Bezier() 방법 소개