滑動高亮鏈接懸停效果

文本切換鏈接懸停效果

54b3d6,

通過下劃線鏈接懸停效果

盡情鏈接吧！

首頁

web前端

css教程

CSS鏈接懸停效應(yīng)的6個創(chuàng)意

Christopher Nolan

Mar 14, 2025 am 11:28 AM

6 Creative Ideas for CSS Link Hover Effects

為普通的網(wǎng)頁添加一些 CSS 鏈接懸停效果，可以提升網(wǎng)頁的視覺吸引力。如果您曾經(jīng)在嘗試創(chuàng)建炫酷的懸停效果時遇到難題，那么本文將為您提供六種 CSS 效果，您可以直接將它們用于您的下一個項目。

讓我們開始吧！

我知道我們正在討論 :hover，但有時（也許并非總是如此）將 :focus 也包含在內(nèi)是個好主意，因為并非所有交互都直接來自鼠標(biāo)，而可能是點擊或按鍵。

滑動高亮鏈接懸停效果

此效果為內(nèi)聯(lián)鏈接應(yīng)用一個盒子陰影，同時更改鏈接文本的顏色。我們首先為鏈接添加四周的填充，然后添加相同值的負(fù)邊距，以防止填充破壞文本流。

我們將使用 box-shadow 而不是 background 屬性，因為它允許我們進行過渡。

a {
  box-shadow: inset 0 0 0 0 http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: white;
}

文本切換鏈接懸停效果

這是一個有趣的效果，我們可以在懸停時將鏈接的文本與其他文本互換。將鼠標(biāo)懸停在文本上，鏈接文本會滑出，新的文本會滑入。

演示比描述更容易理解。

此鏈接懸停效果中包含大量的技巧。但神奇之處在于使用數(shù)據(jù)屬性來定義滑入的文本，并使用鏈接的 ::after 偽元素的 content 屬性來調(diào)用它。

首先，HTML 標(biāo)記：

<p>Hover <a data-replace="get a link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">get a link</a></p>

這是很多內(nèi)聯(lián)標(biāo)記，但您看到的是一個包含鏈接和 span 的段落標(biāo)簽。

讓我們?yōu)殒溄犹砑右恍┗緲邮?。我們需要為其提供相對定位以保持偽元素（將被絕對定位）到位，確保將其顯示為內(nèi)聯(lián)塊以獲得框元素樣式的便利性，并隱藏偽元素可能導(dǎo)致的任何溢出。

a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

::before 和 ::after 偽元素應(yīng)該有一些絕對定位，以便它們與實際鏈接堆疊在一起。我們將確保它們設(shè)置為鏈接的完整寬度，左位置偏移量為零，為一些滑動操作做好準(zhǔn)備。

a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

::after 偽元素從 HTML 標(biāo)記中的鏈接數(shù)據(jù)屬性獲取內(nèi)容：

a::after {
  content: attr(data-replace);
}

現(xiàn)在我們可以使用 transform: translate3d() 將 ::after 偽元素向右移動 200%。我們在 :hover 上將其移回原位。順便說一下，我們可以為其在頂部方向設(shè)置零偏移量。當(dāng)我們稍后像文本下劃線一樣使用 ::before 偽元素時，這將非常重要。

a::after {
  content: attr(data-replace);
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
}

a:hover::after,
a:focus::after {
  transform: translate3d(0, 0, 0);
}

我們還將轉(zhuǎn)換 transform: scale() ::before 偽元素，使其默認(rèn)隱藏，然后在 :hover 上將其縮放回來。我們將使其高度較小，例如 2px，并將其固定到底部，使其看起來像文本下劃線，該下劃線會與 ::after 交換。

a::before {
  background-color: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

a:hover::before,
a:focus::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

其余的都是偏好設(shè)置！我們在轉(zhuǎn)換效果上添加一個過渡，一些顏色等等以獲得完整的效果。這些值完全取決于您。

查看完整 CSS 代碼

```css a { overflow: hidden; position: relative; display: inline-block; }

a::before, a::after { content: ''; position: absolute; width: 100%; left: 0; } a::before { background-color: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; height: 2px; bottom: 0; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); } a::after { content: attr(data-replace); height: 100%; top: 0; transform-origin: 100% 50%; transform: translate3d(200%, 0, 0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); color: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; }

a:hover::before { transform-origin: 0% 50%; transform: scaleX(1); } a:hover::after { transform: translate3d(0, 0, 0); }

a span { display: inline-block; transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); }

a:hover span { transform: translate3d(-200%, 0, 0); }

http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 增長背景鏈接懸停效果

這是我在很多地方都看到的一種非常流行的效果。其思想是使用鏈接的 `::before` 偽元素作為粗下劃線，它略微位于鏈接的實際文本后面。然后，在懸停時，偽元素會擴展以覆蓋整個內(nèi)容。

好的，鏈接的一些基本樣式。我們不需要文本裝飾，因為 `::before` 將充當(dāng)文本裝飾，然后是一些相對定位以在賦予絕對定位時保持 `::before` 原位。

```css
a {
  text-decoration: none;
  position: relative;
}

現(xiàn)在讓我們設(shè)置 ::before，使其高度約為 8px，使其看起來像粗下劃線。我們還將為其提供絕對定位，以便我們可以控制使其成為實際鏈接的完整寬度，同時進行偏移，使其位于左側(cè)，并且距離底部只有一點點，使其看起來像是在微妙地突出顯示鏈接。不妨將其設(shè)置為 z-index: -1，這樣可以確保它位于鏈接后面。

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
}

很好。讓我們使其看起來像在懸停鏈接時 ::before 正在增長。我們只需要將高度從 3px 更改為 100% 即可。請注意，我還將底部偏移量恢復(fù)為零，以便背景在增長時覆蓋更多空間。

a:hover::before {
  bottom: 0;
  height: 100%;
}

現(xiàn)在為這些更改添加輕微的過渡：

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

查看完整 CSS 代碼

```css a { text-decoration: none; color: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272F; font-weight: 700; position: relative; }

a::before { content: ''; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out; }

a:hover::before { bottom: 0; height: 100%; }

http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 從右到左的顏色交換鏈接懸停效果

我個人喜歡在導(dǎo)航中的鏈接中使用此效果。鏈接以一種顏色開始，沒有下劃線。然后，在懸停時，一種新顏色從右側(cè)滑入，而下劃線從左側(cè)滑入。

很整潔，對吧？那里有很多動作，因此您可能需要考慮可訪問性影響，并將所有內(nèi)容都包含在 `prefers-reduced-motion` 查詢中，以便為那些對運動敏感的人替換為更細(xì)微的內(nèi)容。

以下是它的工作原理。我們?yōu)殒溄犹峁┮粋€線性背景漸變，在中途的兩種顏色之間有一個硬停止。

```css
a {
  background-image: linear-gradient(
    to right,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
}

我們將背景設(shè)置為鏈接寬度的兩倍，或 200%，并將其完全定位到左側(cè)。這樣，就好像只顯示了漸變的兩種顏色中的一種。

a {
  background-image: linear-gradient(
    to right,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

當(dāng)我們使用幾個非標(biāo)準(zhǔn)的 -webkit- 前綴屬性時，就會發(fā)生神奇的事情。一個去除文本中的顏色使其透明。另一個將背景漸變剪輯到文本，因此文本實際上似乎是背景的顏色。

a {
  background-image: linear-gradient(
    to right,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

還在跟著嗎？現(xiàn)在讓我們通過使用 ::before 來創(chuàng)建鏈接的偽下劃線。我們將賦予它與鏈接背景漸變隱藏部分相同的顏色，并將其定位在實際鏈接下方，使其看起來像一個正確的 text-decoration: underline。

a:before {
  content: '';
  background: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
}

在懸停時，我們將 ::before 滑入到位，從左側(cè)進入：

a:hover {
 background-position: 0;
}

現(xiàn)在，這有點棘手。在懸停時，我們將鏈接的 ::before 偽元素設(shè)置為鏈接寬度的 100%。如果我們將此直接應(yīng)用于鏈接的懸停，我們將使鏈接本身全寬，這會將其移動到屏幕周圍。哎呀！

a:hover::before {
  width: 100%;
}

添加一點過渡以使事情順利進行：

a {
  background-image: linear-gradient(
    to right,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

查看完整 CSS 代碼

```css a { background-image: linear-gradient( to right,

54b3d6,

<code>http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>

); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out; }

a:before { content: ''; background: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; }

a:hover { background-position: 0; }

a:hover::before { width:100%; }

http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 彩虹下劃線鏈接懸停效果

我們無法使用 `text-decoration-color: rainbow`，但我們可以通過混合線性漸變和背景魔法來偽造它。

首先，我們刪除鏈接的 `text-decoration`：

```css
a {
  text-decoration: none;
}

現(xiàn)在是漸變。我們在同一個 background 屬性上鏈接兩個線性漸變。一個漸變是在懸停之前的初始顏色。第二個是在懸停時的彩虹。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
}

讓我們使背景大小僅為 3px 高，使其看起來像，你知道的，下劃線。我們可以同時調(diào)整 background-size 屬性上的兩個漸變的大小，以便初始漸變?yōu)槿珜捄?3px 高，而彩虹為零寬度。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
}

現(xiàn)在我們可以同時在 background-position 屬性上定位背景漸變，以便第一個漸變完全可見，而彩虹被推到視野之外。哦，讓我們確保在使用時背景不會重復(fù)。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}

讓我們在懸停時更新 background-size，以便漸變交換值：

a:hover {
  background-size: 0 3px, 100% 3px;
}

最后，在懸停發(fā)生時進行一點過渡：

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

瞧！

通過下劃線鏈接懸停效果

Geoff Graham 在最近分析 Adam Argyle 的炫酷懸停效果時實際上也介紹了這個效果。在他的演示中，鏈接后面的背景顏色從左側(cè)進入，然后在鼠標(biāo)移出時從右側(cè)退出。

我的版本將背景簡化為更像下劃線。

a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

這并不是實現(xiàn)此目的的唯一方法！以下是 Justin Wong 使用背景的另一種方法：

Geoff 還提供了一系列 CSS 鏈接懸停效果，從整潔到完全荒謬。值得一看！有關(guān)鏈接和按鈕樣式的實用內(nèi)容，請查看 Philip Zastrow 在 DigitalOcean 上的入門教程。