前面介紹過一個純CSS實現文字鏈接鼠標懸停動畫效果，它使用了CSS+SVG來實現動畫效果，本文繼續介紹一個CSS+JavaScript實現的文字鏈接鼠標懸停動畫效果，它的動畫是由JavaScript實現的，不再需要用SVG來創建動畫。

效果如圖

demodownload

實例介紹

本實例由CSS+JavaScript來實現，當鼠標移到文字鏈接上時，文字呈波浪起伏的動畫過渡效果。

HTML代碼

<p>這是一個演示 <a class="link" href="">文字鏈接</a> 鼠標懸停動畫效果</p>

HTML代碼結構非常簡單，跟普通a標簽創建文字鏈接一樣，該a標簽的class屬性值為link。

CSS代碼

p .link設置文字鏈接的樣式。

p .link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

JavaScript

本實例用到JavaScript編程，它觸發文字鏈接的鼠標懸停動作事件。

document.querySelectorAll('.link').forEach(link => {
    link.innerHTML = '<div><span>' + link.textContent.trim().split('').join('</span><span>') + '</span></div>'
    link.querySelectorAll('span').forEach(s => s.innerHTML = s.textContent == ' ' ? ' ' : s.textContent)
    link.insertAdjacentHTML('beforeend', '<div><svg preserveAspectRatio="none" viewBox="0 0 192 5"><path d="M191.246 4H129C129 4 127.781 4.00674 127 4C114.767 3.89447 108.233 1 96 1C83.7669 1 77.2327 3.89447 65 4C64.219 4.00674 63 4 63 4H0.751923" /></svg></div>')
});

總結

本文介紹了一個CSS+JavaScript實現的文字鏈接鼠標懸停動畫效果，該實例使用非常方便，不需要改動JavaScript代碼，喜歡的朋友可以直接下載源碼使用。

您可能對以下文章也感興趣

• 純CSS實現文字鏈接鼠標懸停動畫效果【演示/源碼】

相關文章

• 純CSS3實現圖片/logo/文字掃光效果【演示/源碼下載】
• CSS3 圖片背景填充文字并實現動畫效果
• 純CSS 6款文字動畫(跳動、浮動、轉動、翻轉、碰撞)
• CSS按鈕鼠標懸停效果(文字波浪動畫)
• 如何使用CSS在鼠標懸停時縮放圖像
• CSS實現卡片鼠標懸停效果(文字從下向上滾動在圖片上)
• CSS按鈕鼠標懸停效果（背景顏色漸變動畫）

標簽: 文字鏈接  文字動畫  鼠標懸停效果