CSS錨點(diǎn)定位功能想必您已有所耳聞，對吧？這項(xiàng)功能允許您將頁面上的任何元素鏈接到另一個(gè)元素，即錨點(diǎn)。它對所有工具提示都非常有用，但也能創(chuàng)造許多其他不錯(cuò)的效果。

本文將研究菜單導(dǎo)航，我依靠錨點(diǎn)定位在鏈接上創(chuàng)建出色的懸停效果。

很酷，對吧？我們有一個(gè)滑動(dòng)效果，藍(lán)色矩形通過流暢的過渡完美地適應(yīng)文本內(nèi)容。如果您不熟悉錨點(diǎn)定位，此示例非常適合您，因?yàn)樗芎唵?，可以讓您了解這項(xiàng)新功能的基礎(chǔ)知識(shí)。我們還將學(xué)習(xí)另一個(gè)示例，所以請堅(jiān)持到最後！

請注意，在我撰寫本文時(shí)，只有基於Chromium的瀏覽器完全支持錨點(diǎn)定位。在其他瀏覽器更廣泛地支持此功能之前，您需要在Chrome或Edge等瀏覽器中查看演示。

http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 初始配置

讓我們從HTML結(jié)構(gòu)開始，它只是一個(gè)包含無序鏈接列表的nav元素：

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

我們不會(huì)花太多時(shí)間解釋這個(gè)結(jié)構(gòu)，因?yàn)槿绻挠美煌?，它也可能不同。只需確保語義與您嘗試執(zhí)行的操作相關(guān)即可。至於CSS部分，我們將從一些基本樣式開始，以創(chuàng)建水平菜單導(dǎo)航。

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

到目前為止，沒有什麼特別的。我們刪除了一些默認(rèn)樣式並使用Flexbox將元素水平對齊。

滑動(dòng)效果

首先，讓我們了解效果的工作原理。乍一看，似乎我們有一個(gè)矩形，它縮小到很小的高度，移動(dòng)到懸停的元素，然後增長到全高。這就是視覺效果，但實(shí)際上，涉及多個(gè)元素！

這是我的第一個(gè)演示，我使用不同的顏色來更好地了解正在發(fā)生的事情。

每個(gè)菜單項(xiàng)都有其自己的“元素”可以收縮或增長。然後我們有一個(gè)公共“元素”（紅色的那個(gè)），它在不同的菜單項(xiàng)之間滑動(dòng)。第一個(gè)效果是使用背景動(dòng)畫完成的，第二個(gè)效果是錨點(diǎn)定位發(fā)揮作用的地方！

背景動(dòng)畫

對於第一部分，我們將動(dòng)畫化CSS漸變的高度：

/* 1 */
ul li {
  background: 
    conic-gradient(lightblue 0 0)
    bottom/100% 0% no-repeat;
  transition: .2s;
}

/* 2 */
ul li:is(:hover,.active) {
  background-size: 100% 100%;
  transition: .2s .2s;
}

/* 3 */
ul:has(li:hover) li.active:not(:hover) {
  background-size: 100% 0%;
  transition: .2s;
}

我們定義了一個(gè)寬度為100%，高度為0%的漸變，位於底部。漸變語法可能看起來很奇怪，但它是允許我擁有單色漸變的最短語法。

相關(guān)：“如何正確定義單色漸變”

然後，如果菜單項(xiàng)被懸停或具有.active類，我們將高度設(shè)置為100%。請注意此處延遲的使用，以確保增長發(fā)生在收縮之後。

最後，我們需要處理.active項(xiàng)的特殊情況。如果我們懸停任何項(xiàng)（不是活動(dòng)項(xiàng)），則.active項(xiàng)會(huì)獲得收縮效果（漸變高度等於0%）。這就是代碼中第三個(gè)選擇器的作用。

我們的第一個(gè)動(dòng)畫完成了！請注意，由於我們在第二個(gè)選擇器中定義的延遲，增長是如何在收縮完成之後開始的。

錨點(diǎn)定位動(dòng)畫

第一個(gè)動(dòng)畫非常容易，因?yàn)槊總€(gè)項(xiàng)目都有自己的背景動(dòng)畫，這意味著我們不必關(guān)心文本內(nèi)容，因?yàn)楸尘皶?huì)自動(dòng)填充整個(gè)空間。

我們將使用一個(gè)元素進(jìn)行第二個(gè)動(dòng)畫，該元素在所有菜單項(xiàng)之間滑動(dòng)，同時(shí)調(diào)整其寬度以適應(yīng)每個(gè)項(xiàng)目的文本。這就是錨點(diǎn)定位可以幫助我們的地方。

讓我們從以下代碼開始：

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

為了避免添加額外的元素，我更喜歡在ul上使用偽元素。它應(yīng)該是絕對定位的，我們將依靠兩個(gè)屬性來激活錨點(diǎn)定位。

我們使用anchor-name屬性定義錨點(diǎn)。當(dāng)菜單項(xiàng)被懸?；蚓哂?active類時(shí)，它將成為錨元素。如果另一個(gè)項(xiàng)目處於懸停狀態(tài)，我們還必須從.active項(xiàng)目中刪除錨點(diǎn)（因此，代碼中的最後一個(gè)選擇器）。換句話說，一次只定義一個(gè)錨點(diǎn)。

然後我們使用position-anchor屬性將偽元素鏈接到錨點(diǎn)。請注意兩者如何使用相同的表示法--li。這類似於例如，我們?nèi)绾问褂锰囟Q定義@keyframes，然後在animation屬性中使用它。請記住，您必須使用語法，這意味著名稱必須始終以兩個(gè)破折號(hào)（--）開頭。

偽元素已正確放置，但什麼也看不見，因?yàn)槲覀儧]有定義任何維度！讓我們添加以下代碼：

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

height屬性很簡單，但anchor()是新成員。以下是Juan Diego在Almanac中對其的描述：

CSS anchor()函數(shù)獲取錨元素的一側(cè)並解析為其定位的。它只能用於內(nèi)嵌屬性（例如top、bottom、bottom、left、right等），通常用於相對於錨點(diǎn)放置絕對定位的元素。

讓我們也查看MDN頁面：

anchor() CSS 函數(shù)可以在錨定位元素的內(nèi)嵌屬性值中使用，返回相對於其關(guān)聯(lián)錨元素邊緣位置的長度值。

通常，我們使用left: 0將絕對元素放置在其包含塊（即具有position: relative的最近祖先）的左邊緣。 left: anchor(left)將執(zhí)行相同的操作，但它將考慮關(guān)聯(lián)的錨元素，而不是包含塊。

就是這樣——我們完成了！在下面的演示中懸停菜單項(xiàng)，看看偽元素是如何在它們之間滑動(dòng)的。

每次您將鼠標(biāo)懸停在菜單項(xiàng)上時(shí)，它都會(huì)成為偽元素（ul:before）的新錨點(diǎn)。這也意味著anchor(...)值將發(fā)生變化，從而產(chǎn)生滑動(dòng)效果！讓我們不要忘記使用transition，否則我們將有一個(gè)突然的變化。

我們也可以這樣編寫代碼：

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

換句話說，我們可以依靠inset簡寫，而不是使用left、right和bottom等物理屬性，並且代替定義position-anchor，我們可以在anchor()函數(shù)中包含錨點(diǎn)的名稱。我們在這裡重複了三次相同的名稱，這可能不是最佳選擇，但在某些情況下，您可能希望您的元素考慮多個(gè)錨點(diǎn)，在這種情況下，此語法將很有意義。

結(jié)合兩種效果

現(xiàn)在，我們將兩種效果結(jié)合起來，瞧，幻覺完美了！

請注意transition值，其中延遲很重要：

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

我們有一系列三個(gè)動(dòng)畫——縮小漸變的高度、滑動(dòng)偽元素和增大漸變的高度——因此我們需要在它們之間設(shè)置延遲才能將所有內(nèi)容組合在一起。這就是為什麼對於偽元素的滑動(dòng)，我們有一個(gè)等於一個(gè)動(dòng)畫持續(xù)時(shí)間的延遲（transition: .2 .2s），而對於增長部分，延遲等於持續(xù)時(shí)間的兩倍（transition: .2s .4s）。

彈跳效果？為什麼不呢？ ！

讓我們嘗試另一個(gè)奇特的動(dòng)畫，其中高亮矩形變形為一個(gè)小圓圈，跳到下一個(gè)項(xiàng)目，然後再次變形回矩形！

我不會(huì)過多解釋這個(gè)例子，因?yàn)檫@是你剖析代碼的作業(yè)！我將提供一些提示，以便您可以解包正在發(fā)生的事情。

與之前的效果一樣，我們結(jié)合了兩個(gè)動(dòng)畫。對於第一個(gè)，我將使用每個(gè)菜單項(xiàng)的偽元素，我將調(diào)整尺寸和border-radius來模擬變形。對於第二個(gè)動(dòng)畫，我將使用ul偽元素創(chuàng)建一個(gè)小的圓圈，我將它移動(dòng)到菜單項(xiàng)之間。

這是另一個(gè)版本的演示，顏色不同，過渡速度較慢，以便更好地可視化每個(gè)動(dòng)畫：

棘手的部分是跳躍效果，我使用了一個(gè)奇怪的cubic-bezier()，但我有一篇詳細(xì)的文章在我的CSS-Tricks文章“使用cubic-bezier()的先進(jìn)CSS動(dòng)畫”中解釋了這種技術(shù)。

結(jié)論

我希望您喜歡使用錨點(diǎn)定位功能進(jìn)行的這個(gè)小實(shí)驗(yàn)。我們只查看了三個(gè)屬性/值，但這足以讓您準(zhǔn)備好使用這項(xiàng)新功能。 anchor-name和position-anchor屬性是將一個(gè)元素（在此上下文中通常稱為“目標(biāo)”元素）鏈接到另一個(gè)元素（在此上下文中我們稱為“錨”元素）的強(qiáng)制性部分。從那裡，您可以使用anchor()函數(shù)來控制位置。

相關(guān)：CSS錨點(diǎn)定位指南

以上是使用錨定位的花式菜單導(dǎo)航的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！