滑動(dòng)高亮鏈接懸停效果

文本切換鏈接懸停效果

54b3d6,

通過(guò)下劃線鏈接懸停效果

盡情鏈接吧！

首頁(yè)

web前端

css教學(xué)

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

Christopher Nolan

Mar 14, 2025 am 11:28 AM

6 Creative Ideas for CSS Link Hover Effects

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

讓我們開(kāi)始吧！

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

滑動(dòng)高亮鏈接懸停效果

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

我們將使用box-shadow而不是background屬性，因?yàn)樗试S我們進(jìn)行過(guò)渡。

 a {
  box-shadow: inset 0 0 0 0 http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: http://ipnx.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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: white;
}

文本切換鏈接懸停效果

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

演示比描述更容易理解。

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

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

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

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

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

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

::before和::after偽元素應(yīng)該有一些絕對(duì)定位，以便它們與實(shí)際鏈接堆疊在一起。我們將確保它們?cè)O(shè)置為鏈接的完整寬度，左位置偏移量為零，為一些滑動(dòng)操作做好準(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偽元素向右移動(dòng)200%。我們?cè)?code>:hover上將其移回原位。順便說(shuō)一下，我們可以為其在頂部方向設(shè)置零偏移量。當(dāng)我們稍後像文本下劃線一樣使用::before偽元素時(shí)，這將非常重要。

 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上將其縮放回來(lái)。我們將使其高度較小，例如2px，並將其固定到底部，使其看起來(lái)像文本下劃線，該下劃線會(huì)與::after交換。

 a::before {
  background-color: http://ipnx.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è)置！我們?cè)谵D(zhuǎn)換效果上添加一個(gè)過(guò)渡，一些顏色等等以獲得完整的效果。這些值完全取決於您。

查看完整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://ipnx.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://ipnx.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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 增長(zhǎng)背景鏈接懸停效果這是我在很多地方都看到的一種非常流行的效果。其思想是使用鏈接的`::before` 偽元素作為粗下劃線，它略微位於鏈接的實(shí)際文本後面。然後，在懸停時(shí)，偽元素會(huì)擴(kuò)展以覆蓋整個(gè)內(nèi)容。

好的，鏈接的一些基本樣式。我們不需要文本裝飾，因?yàn)閌::before` 將充當(dāng)文本裝飾，然後是一些相對(duì)定位以在賦予絕對(duì)定位時(shí)保持`::before` 原位。

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

現(xiàn)在讓我們?cè)O(shè)置::before ，使其高度約為8px，使其看起來(lái)像粗下劃線。我們還將為其提供絕對(duì)定位，以便我們可以控制使其成為實(shí)際鏈接的完整寬度，同時(shí)進(jìn)行偏移，使其位於左側(cè)，並且距離底部只有一點(diǎn)點(diǎn)，使其看起來(lái)像是在微妙地突出顯示鏈接。不妨將其設(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;
}

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

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

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

 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://ipnx.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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 從右到左的顏色交換鏈接懸停效果我個(gè)人喜歡在導(dǎo)航中的鏈接中使用此效果。鏈接以一種顏色開(kāi)始，沒(méi)有下劃線。然後，在懸停時(shí)，一種新顏色從右側(cè)滑入，而下劃線從左側(cè)滑入。

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

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

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

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

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

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

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

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

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

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

 a:hover {
 background-position: 0;
}

現(xiàn)在，這有點(diǎn)棘手。在懸停時(shí)，我們將鏈接的::before偽元素設(shè)置為鏈接寬度的100%。如果我們將此直接應(yīng)用於鏈接的懸停，我們將使鏈接本身全寬，這會(huì)將其移動(dòng)到屏幕周?chē)?。哎呀?/p>

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

添加一點(diǎn)過(guò)渡以使事情順利進(jìn)行：

 a {
  background-image: linear-gradient(
    to right,
    http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    http://ipnx.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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, http://ipnx.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://ipnx.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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 彩虹下劃線鏈接懸停效果我們無(wú)法使用`text-decoration-color: rainbow`，但我們可以通過(guò)混合線性漸變和背景魔法來(lái)偽造它。

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

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

現(xiàn)在是漸變。我們?cè)谕粋€(gè)background屬性上鍊接兩個(gè)線性漸變。一個(gè)漸變是在懸停之前的初始顏色。第二個(gè)是在懸停時(shí)的彩虹。

 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 高，使其看起來(lái)像，你知道的，下劃線。我們可以同時(shí)調(diào)整background-size屬性上的兩個(gè)漸變的大小，以便初始漸變?yōu)槿珜捄?px 高，而彩虹為零寬度。

 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)在我們可以同時(shí)在background-position屬性上定位背景漸變，以便第一個(gè)漸變完全可見(jiàn)，而彩虹被推到視野之外。哦，讓我們確保在使用時(shí)背景不會(huì)重複。

 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;
}

讓我們?cè)趹彝r(shí)更新background-size ，以便漸變交換值：

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

最後，在懸停發(fā)生時(shí)進(jìn)行一點(diǎn)過(guò)渡：

 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;
}

瞧！

通過(guò)下劃線鏈接懸停效果

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

我的版本將背景簡(jiǎn)化為更像下劃線。

 a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: http://ipnx.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);
}

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

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