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

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

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

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

이것이 최종 효과입니다:

시작해 봅시다!

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

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

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

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

볼 수 있습니다 , 애니메이션은 호버 효과에 생명력을 더해줍니다.

CSS의 마지막 세트에는 팝오버 하단의 작은 화살표 스타일 지정이 포함됩니다. CSS에서 삼각형을 만드는 방법에 대해 자세히 알아보려면 이 CSS 팁 기사를 확인하세요.

요약

미니멀한 버튼 스타일 링크를 만들었습니다. 링크에는 기본적인 배경 호버 효과가 있지만 여기서 멈추지 않습니다. 링크 텍스트를 표시하기 위해 작은 팝업을 추가했습니다. CSS3 Cubic-Bezier Sel 곡선의 도움으로 애니메이션이 부드럽고 눈에 즐겁습니다.

이런 종류의 지식은 매우 유용하며 소셜 미디어 계정을 표시하는 웹사이트 디자인의 일부로 사용될 수 있습니다.

이 기사의 샘플 데모와 전체 코드를 보려면 다음 주소를 방문하세요. PC에서 https://coding.zhanbing.site를 여는 것이 좋습니다

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 입문! !

위 내용은 링크 호버 애니메이션 효과를 얻기 위한 CSS3 Cubic-Bezier() 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!