CSS鏈接懸停效應的6個創意
- Christopher Nolan原創
- 2025-03-14 11:28:20636瀏覽
為普通的網頁添加一些CSS 鏈接懸停效果，可以提升網頁的視覺吸引力。如果您曾經在嘗試創建炫酷的懸停效果時遇到難題，那麼本文將為您提供六種CSS 效果，您可以直接將它們用於您的下一個項目。
讓我們開始吧！
我知道我們正在討論:hover ，但有時（也許並非總是如此）將:focus也包含在內是個好主意，因為並非所有交互都直接來自鼠標，而可能是點擊或按鍵。
滑動高亮鏈接懸停效果
此效果為內聯鏈接應用一個盒子陰影，同時更改鏈接文本的顏色。我們首先為鏈接添加四周的填充，然後添加相同值的負邊距，以防止填充破壞文本流。
我們將使用box-shadow而不是background屬性，因為它允許我們進行過渡。
a {
box-shadow: inset 0 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
color: https://www.php.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 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
color: white;
}
文本切換鏈接懸停效果
這是一個有趣的效果，我們可以在懸停時將鏈接的文本與其他文本互換。將鼠標懸停在文本上，鏈接文本會滑出，新的文本會滑入。
演示比描述更容易理解。
此鏈接懸停效果中包含大量的技巧。但神奇之處在於使用數據屬性來定義滑入的文本，並使用鏈接的::after偽元素的content屬性來調用它。
首先，HTML 標記：
<p> Hover <a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">get a link</a></p>
這是很多內聯標記，但您看到的是一個包含鏈接和span 的段落標籤。
讓我們為鏈接添加一些基本樣式。我們需要為其提供相對定位以保持偽元素（將被絕對定位）到位，確保將其顯示為內聯塊以獲得框元素樣式的便利性，並隱藏偽元素可能導致的任何溢出。
a {
overflow: hidden;
position: relative;
display: inline-block;
}
::before和::after偽元素應該有一些絕對定位，以便它們與實際鏈接堆疊在一起。我們將確保它們設置為鏈接的完整寬度，左位置偏移量為零，為一些滑動操作做好準備。
a::before,
a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
::after偽元素從HTML 標記中的鏈接數據屬性獲取內容：
a::after {
content: attr(data-replace);
}
現在我們可以使用transform: translate3d()將::after偽元素向右移動200%。我們在:hover上將其移回原位。順便說一下，我們可以為其在頂部方向設置零偏移量。當我們稍後像文本下劃線一樣使用::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);
}
我們還將轉換transform: scale() ::before偽元素，使其默認隱藏，然後在:hover上將其縮放回來。我們將使其高度較小，例如2px，並將其固定到底部，使其看起來像文本下劃線，該下劃線會與::after交換。
a::before {
background-color: https://www.php.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);
}
其餘的都是偏好設置！我們在轉換效果上添加一個過渡，一些顏色等等以獲得完整的效果。這些值完全取決於您。
查看完整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: https://www.php.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: https://www.php.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); }
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 增長背景鏈接懸停效果這是我在很多地方都看到的一種非常流行的效果。其思想是使用鏈接的`::before` 偽元素作為粗下劃線，它略微位於鏈接的實際文本後面。然後，在懸停時，偽元素會擴展以覆蓋整個內容。
好的，鏈接的一些基本樣式。我們不需要文本裝飾，因為`::before` 將充當文本裝飾，然後是一些相對定位以在賦予絕對定位時保持`::before` 原位。
```css
a {
text-decoration: none;
position: relative;
}
現在讓我們設置::before ，使其高度約為8px，使其看起來像粗下劃線。我們還將為其提供絕對定位，以便我們可以控制使其成為實際鏈接的完整寬度，同時進行偏移，使其位於左側，並且距離底部只有一點點，使其看起來像是在微妙地突出顯示鏈接。不妨將其設置為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% 即可。請注意，我還將底部偏移量恢復為零，以便背景在增長時覆蓋更多空間。
a:hover::before {
bottom: 0;
height: 100%;
}
現在為這些更改添加輕微的過渡：
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: https://www.php.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%; }
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 從右到左的顏色交換鏈接懸停效果我個人喜歡在導航中的鏈接中使用此效果。鏈接以一種顏色開始，沒有下劃線。然後，在懸停時，一種新顏色從右側滑入，而下劃線從左側滑入。
很整潔，對吧？那裡有很多動作，因此您可能需要考慮可訪問性影響，並將所有內容都包含在`prefers-reduced-motion` 查詢中，以便為那些對運動敏感的人替換為更細微的內容。
以下是它的工作原理。我們為鏈接提供一個線性背景漸變，在中途的兩種顏色之間有一個硬停止。
```css
a {
background-image: linear-gradient(
to right,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
);
}
我們將背景設置為鏈接寬度的兩倍，或200%，並將其完全定位到左側。這樣，就好像只顯示了漸變的兩種顏色中的一種。
a {
background-image: linear-gradient(
to right,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
);
background-size: 200% 100%;
background-position: -100%;
}
當我們使用幾個非標準的-webkit-前綴屬性時，就會發生神奇的事情。一個去除文本中的顏色使其透明。另一個將背景漸變剪輯到文本，因此文本實際上似乎是背景的顏色。
a {
background-image: linear-gradient(
to right,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
還在跟著嗎？現在讓我們通過使用::before來創建鏈接的偽下劃線。我們將賦予它與鏈接背景漸變隱藏部分相同的顏色，並將其定位在實際鏈接下方，使其看起來像一個正確的text-decoration: underline 。
a:before {
content: '';
background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
}
在懸停時，我們將::before滑入到位，從左側進入：
a:hover {
background-position: 0;
}
現在，這有點棘手。在懸停時，我們將鏈接的::before偽元素設置為鏈接寬度的100%。如果我們將此直接應用於鏈接的懸停，我們將使鏈接本身全寬，這會將其移動到屏幕周圍。哎呀！
a:hover::before {
width: 100%;
}
添加一點過渡以使事情順利進行：
a {
background-image: linear-gradient(
to right,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
https://www.php.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>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, https://www.php.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: https://www.php.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%; }
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 彩虹下劃線鏈接懸停效果我們無法使用`text-decoration-color: rainbow`，但我們可以通過混合線性漸變和背景魔法來偽造它。
首先，我們刪除鏈接的`text-decoration`：
```css
a {
text-decoration: none;
}
現在是漸變。我們在同一個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 高，使其看起來像，你知道的，下劃線。我們可以同時調整background-size屬性上的兩個漸變的大小，以便初始漸變為全寬和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;
}
現在我們可以同時在background-position屬性上定位背景漸變，以便第一個漸變完全可見，而彩虹被推到視野之外。哦，讓我們確保在使用時背景不會重複。
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;
}
最後，在懸停發生時進行一點過渡：
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 的炫酷懸停效果時實際上也介紹了這個效果。在他的演示中，鏈接後面的背景顏色從左側進入，然後在鼠標移出時從右側退出。
我的版本將背景簡化為更像下劃線。
a {
position: relative;
}
a::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: https://www.php.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);
}
這並不是實現此目的的唯一方法！以下是Justin Wong 使用背景的另一種方法：
Geoff 還提供了一系列CSS 鏈接懸停效果，從整潔到完全荒謬。值得一看！有關鏈接和按鈕樣式的實用內容，請查看Philip Zastrow 在DigitalOcean 上的入門教程。
盡情鏈接吧！
使用CSS 為內聯鏈接創建自己的懸停效果有很多選擇。您甚至可以玩轉這些效果並創建新的效果。我希望您喜歡這篇文章。繼續嘗試吧！
以上是CSS鏈接懸停效應的6個創意的詳細內容。更多資訊請關注PHP中文網其他相關文章！