CSS3 애니메이션 전환을 사용하여 링크 위로 마우스를 가져갈 때 작은 팝업이 나타나는 간단하면서도 매력적인 링크 호버 효과를 만들어 보겠습니다.
또한 팝오버에 딱딱한 기계적 모션 대신 부드러운 모션을 제공하는 CSS 전환인 CSS3 Cubic-Bezier Curves도 살펴보겠습니다.
(추천 튜토리얼: CSS 비디오 튜토리얼)
이것이 최종 효과입니다:
시작해 봅시다!
이것은 우리 링크의 HTML이며 아이콘은 iconfont.cn에서 가져온 것입니다.
<p> <section> <a> <i></i> <span>Instagram</span> </a> <a> <i></i> <span>Github</span> </a> </section> </p>
링크 위에 마우스를 올리면 스팬 태그가 팝업으로 표시됩니다. 다음으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!