앵커 포지셔닝을 사용한 멋진 메뉴 탐색

CSS 앵커 포인트 포지셔닝 함수에 대해 들어 본 적이 있습니까? 이 기능을 사용하면 페이지의 모든 요소를 ​​다른 요소 인 앵커 포인트에 연결할 수 있습니다. 모든 툴팁에 매우 유용하지만 다른 많은 좋은 결과를 만듭니다.

이 기사는 메뉴 내비게이션을 연구 할 것이며 앵커 위치에 의존하여 링크에 우수한 호버 효과를 만듭니다.

멋져요? 우리는 슬라이딩 효과가 있으며, 파란색 사각형은 부드러운 전환을 통해 텍스트 내용에 완벽하게 조정됩니다. 앵커 포지셔닝에 익숙하지 않은 경우,이 예제는 간단 하고이 새로운 기능의 기본 사항을 제공하기 때문에 완벽합니다. 우리는 다른 예를 배울 것입니다. 그래서 끝을 고수하십시오!

이 글을 쓰는 시점에서 크롬 기반 브라우저만이 앵커 위치를 완전히 지원합니다. 다른 브라우저 가이 기능을보다 광범위하게 지원하기 전에 Chrome 또는 Edge와 같은 브라우저에서 데모를보아야합니다.

https://www.php.cn/link/93ac0c50ddddc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dddd620dc7b88e5fe05c700e15bhttps N/LINK/93AC0C50DDDC7B88E5FE05C70E15B 초기 구성 html 구조부터 시작하겠습니다.

우리는이 구조를 설명하는 데 많은 시간을 할애하지 않을 것입니다. 사용 사례가 다를 경우도 다를 수 있기 때문입니다. 의미론이 당신이하려는 일과 관련이 있는지 확인하십시오. CSS 섹션의 경우 수평 메뉴 탐색을 만들기위한 몇 가지 기본 스타일로 시작합니다.

지금까지, 특별한 것은 없습니다. 기본 스타일을 제거하고 Flexbox를 사용하여 요소를 가로로 정렬했습니다.

슬라이딩 효과

먼저, 효과가 어떻게 작동하는지 이해합시다. 언뜻보기에, 우리는 매우 작은 높이로 축소되고 호버 요소로 이동 한 다음 전체 높이까지 자라는 직사각형이있는 것 같습니다. 이것은 시각적 효과이지만 실제로는 여러 요소가 관여합니다! 이것은 나의 첫 시연이며, 다른 색상을 사용하여 무슨 일이 일어나고 있는지 더 잘 이해합니다. 각 메뉴 항목에는 수축하거나 성장할 수있는 고유 한 "요소"가 있습니다. 그런 다음 다른 메뉴 항목 사이에 미끄러지는 일반적인 "요소"(빨간색)가 있습니다. 첫 번째 효과는 배경 애니메이션을 사용하여 수행되며 두 번째 효과는 앵커 포인트 포지셔닝이 작동하는 곳입니다!

배경 애니메이션 첫 번째 부분의 경우 CSS 구배의 높이를 애니메이션 할 것입니다.

우리는 너비가 100%이고 높이가 0% 인 그라디언트를 정의합니다. 그라디언트 구문은 이상하게 보일 수 있지만 흑백 구배를 가질 수있는 가장 짧은 구문입니다.

관련 : "흑백 기울기를 올바르게 정의하는 방법" 그런 다음 메뉴 항목이 호버링되거나 .active 클래스가 있으면 높이를 100%로 설정합니다. 수축 후 성장이 발생하는지 확인하기 위해 지연을 사용하십시오.

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

마지막으로, 우리는 특별한 사례를 처리해야합니다. 항목을 호버링하면 (활성 항목이 아님) .Active 항목은 수축 효과가 나타납니다 (그라디언트 높이는 0%동일). 이것이 코드의 세 번째 선택기가하는 일입니다.

첫 번째 애니메이션이 완료되었습니다! 우리가 두 번째 선택기에서 정의한 지연으로 인해 수축이 완료된 후에 성장이 시작되는 방법에 유의하십시오.

앵커 포지셔닝 애니메이션

첫 번째 애니메이션은 각 프로젝트에 고유 한 배경 애니메이션이 있기 때문에 매우 쉽습니다. 즉, 배경이 전체 공간을 자동으로 채우기 때문에 텍스트 콘텐츠에 신경 쓰지 않아도됩니다. 우리는 하나의 요소를 사용하여 각 항목의 텍스트에 맞게 너비를 조정하면서 모든 메뉴 항목 사이를 슬라이드하는 두 번째 애니메이션을 수행합니다. 앵커 포지셔닝이 우리를 도울 수있는 곳입니다. 다음 코드부터 시작하겠습니다

추가 요소를 추가하지 않기 위해 UL에서 의사 요소를 사용하는 것이 좋습니다. 그것은 절대적으로 배치되어야하며, 우리는 앵커 위치를 활성화하기 위해 두 가지 속성에 의존 할 것입니다.

우리는 앵커-이름 속성을 사용하여 앵커 포인트를 정의합니다. 메뉴 항목이 호버링되거나 .active 클래스가 있으면 앵커 요소가됩니다. 다른 항목이 호버링되면 .Active 항목 (따라서 코드의 마지막 선택기)에서 앵커 포인트를 제거해야합니다. 다시 말해, 한 번에 하나의 앵커 포인트 만 정의됩니다.

그런 다음 그런 다음 위치-랜더 속성을 사용하여 의사 요소를 앵커 포인트에 연결합니다. 두 사람이 동일한 표기법을 어떻게 사용하는지 참고하십시오. 예를 들어 특정 이름으로 @keyframes를 정의한 다음 애니메이션 속성에서 사용하는 방법과 유사합니다.

구문을 사용해야한다는 점을 기억하십시오. 즉, 이름은 항상 두 개의 대시 (-)로 시작해야합니다.

의사 요소는 올바르게 배치되지만 치수를 정의하지 않기 때문에 아무것도 볼 수 없습니다! 다음 코드를 추가해 봅시다 :

높이 속성은 단순하지만 앵커 ()는 새로운 멤버입니다. Juan Diego가 Almanac에서 묘사 한 내용은 다음과 같습니다.

css 앵커 () 함수는 앵커 요소의 한쪽을 가져 와서 위치 에 구문 분석합니다. 인라인 속성 (예 : 상단, 하단, 하단, 왼쪽, 오른쪽 등)에만 사용될 수 있으며 일반적으로 앵커 포인트에 대한 절대적으로 배치 된 요소를 배치하는 데 사용됩니다.

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

MDN 페이지도 확인해 봅시다 :

앵커 () CSS 함수는 앵커 포지셔닝 요소의 임베디드 속성 값에 사용할 수 있으며, 관련 앵커 요소 모서리 위치에 대한 길이 값을 반환 할 수 있습니다.

일반적으로, 우리는 왼쪽을 사용하여 0을 사용하여 포함 된 블록의 왼쪽 가장자리에 절대 요소를 배치합니다 (즉, 가장 가까운 조상이있는 조상 : 상대). 왼쪽 : 앵커 (왼쪽)는 동일하게 수행하지만 블록을 포함하는 대신 관련 앵커 요소를 고려합니다.

그게 다야 - 우리는 끝났어! 아래 데모에서 메뉴 항목을 호버하여 의사 요소가 어떻게 미끄러지는지 확인하십시오.

메뉴 항목 위로 마우스를 가져갈 때마다 의사 요소 (ul : 이전)의 새로운 앵커가됩니다. 이것은 또한 앵커 (...) 값이 변경되어 슬라이딩 효과를 초래한다는 것을 의미합니다! 전환을 사용하는 것을 잊지 마십시오. 그렇지 않으면 갑자기 변화가있을 것입니다.

우리는 다음과 같은 코드를 쓸 수 있습니다

다시 말해서, 왼쪽, 오른쪽 및 하단과 같은 물리적 특성을 사용하는 대신 삽입 약어에 의존 할 수 있으며 위치 앵커를 정의하는 대신 앵커 이름을 앵커 () 함수에 포함시킬 수 있습니다. 우리는 여기에서 같은 이름을 세 번 반복했는데, 이는 최선의 선택이 아닐 수도 있지만 경우에 따라 요소가 여러 앵커를 고려하기를 원할 수도 있습니다.이 경우이 구문은 의미가 있습니다.

두 가지 효과를 결합

이제, 우리는 두 가지 효과라는 두 가지 효과

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

void

를 결합합니다. 환각은 완벽합니다!

지연이 중요한 전환 값에 주목하십시오.

우리는 일련의 세 가지 애니메이션을 가지고 있습니다. 그라디언트의 높이를 줄이고, 유사 요소를 밀고, 그라디언트의 높이를 늘리므로 모든 것을 정리하기 위해 지연을 설정해야합니다. 그렇기 때문에 의사 요소를 스 와이프 할 때, 우리는 애니메이션 지속 시간 (전환 : .2.2s)과 동일한 지연이있는 이유이며, 성장 부분의 경우 지연은 지속 시간의 두 배 (전이 : .2s.4s)와 같습니다.

> 바운스 효과? 왜 안 돼? !

강조 표시된 사각형이 작은 원으로 변형되어 다음 항목으로 점프 한 다음 다시 사각형으로 변형되는 또 다른 이상한 애니메이션을 시도해 봅시다! 나는이 예제를 너무 많이 설명하지 않을 것입니다. 왜냐하면 이것은 코드 분석을위한 숙제이기 때문입니다! 진행중인 일을 풀 수 있도록 몇 가지 팁을 제공하겠습니다. 이전 효과와 마찬가지로, 우리는 두 개의 애니메이션을 결합했습니다. 첫 번째는 각 메뉴 항목의 의사 요소를 사용하여 변형을 시뮬레이션하기 위해 크기를 조정하고 국경을 늘립니다. 두 번째 애니메이션의 경우 메뉴 항목 사이를 이동하는 Ul Pseudo Element를 사용하여 작은 원을 만들 것입니다. </previous></another></p> <version> 이것은 각 애니메이션을 더 잘 시각화하기 위해 데모의 또 다른 버전, 다른 색상 및 느린 전환입니다. <part> 까다로운 부분은 점프 효과입니다. 나는 이상한 입방체-베 지어 ()를 사용했지만 CSS 트릭 기사 "입방 베 지어 ()를 사용한 고급 CSS 애니메이션"에이 기술을 설명하는 자세한 기사가 있습니다. <p> </p> 결론 <enjoy> 앵커 포지셔닝 함수를 사용 하여이 작은 실험을 즐겼기를 바랍니다. 우리는 세 가지 속성/값 만 살펴 보았지만이 새로운 기능을 사용할 준비가되어 충분합니다. 앵커 이름 및 위치 안정체 속성은 요소 (일반적 으로이 맥락에서 "대상"요소라고 함)를 다른 요소 (이 맥락에서 "앵커"요소라고 부름)를 연결하는 필수 부분입니다. 거기에서 앵커 () 함수를 사용하여 위치를 제어 할 수 있습니다. <pre class="brush:php;toolbar:false">ul { padding: 0; margin: 0; list-style: none; display: flex; gap: .5rem; font-size: 2.2rem; } ul li a { color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000; text-decoration: none; font-weight: 900; line-height: 1.5; padding-inline: .2em; display: block; } 관련 :

CSS 앵커 포인트 포인트 가이드

위 내용은 앵커 포지셔닝을 사용한 멋진 메뉴 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!