卡卡網

通常對于文字鏈接的設計，鼠標懸停的時候，可以給它一條下橫線，或者不顯示下橫線，但今天有點不一樣，今天要介紹的是如何用純CSS實現文字鏈接鼠標懸停動畫效果。

demodownload

實例簡介

當文字鏈接在鼠標懸停時，出現一個圈以動畫的形式把該文字圈起來。

HTML代碼

我們看看HTML代碼結構。

<p>
    Check out
    <a href="#">
        the link
        <svg viewBox="0 0 70 36">
            <path d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527" />
        </svg>
    </a>
    here
</p>

可以看到，鏈接標簽a的內容包含一個svg，這是一個畫布。如果沒有CSS樣式設計，那么顯示如下圖這樣：

現在我們通過CSS，把svg畫布重新定位和設計，讓其默認情況下顯示如下圖這樣：

CSS代碼如下：

p a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  margin: 0 var(--spacing, 0px);
  transition: margin 0.25s;
}
p a svg {
  width: 76px;
  height: 40px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 7px) translateZ(0);
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-linecap: round;
  stroke-width: 2px;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
}

這就是CSS的強大之處了。

當鼠標移到鏈接上時，以動畫的形式顯示svg畫布，CSS代碼如下：

p a:hover {
  --spacing: 4px;
  --stroke: var(--line-active);
  --stroke-delay: .1s;
  --offset: 180px;
}

效果如圖：

至此，HTML和CSS主要代碼編寫完畢。代碼量不多，不過你需要懂得一些SVG知識，此外，還要了解CSS的一些不太常見的屬性，如stroke屬性，還有動畫屬性transition。

完整CSS代碼

:root {
  --text: #2B3044;
  --line: #BBC1E1;
  --line-active: #275EFE;
}

p {
  font-size: 18px;
  margin: 0;
  color: var(--text);
}
p a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  margin: 0 var(--spacing, 0px);
  transition: margin 0.25s;
}
p a svg {
  width: 76px;
  height: 40px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 7px) translateZ(0);
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-linecap: round;
  stroke-width: 2px;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
}
p a:hover {
  --spacing: 4px;
  --stroke: var(--line-active);
  --stroke-delay: .1s;
  --offset: 180px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  background: #F6F8FF;
}

總結

本文介紹了一個比較有趣的鏈接懸停效果，喜歡的朋友可以收藏本文，或下載源碼保存使用。

相關文章

• CSS實現在鏈接前或鏈接后添加一個下載或其他文件圖標
• CSS實現在外部鏈接后面添加一個出站鏈接圖標

標簽: 文字鏈接  鏈接