卡卡網(wǎng)

前面介紹過一個(gè)純CSS實(shí)現(xiàn)文字鏈接鼠標(biāo)懸停動(dòng)畫效果，它使用了CSS+SVG來實(shí)現(xiàn)動(dòng)畫效果，本文繼續(xù)介紹一個(gè)CSS+JavaScript實(shí)現(xiàn)的文字鏈接鼠標(biāo)懸停動(dòng)畫效果，它的動(dòng)畫是由JavaScript實(shí)現(xiàn)的，不再需要用SVG來創(chuàng)建動(dòng)畫。

效果如圖

demodownload

實(shí)例介紹

本實(shí)例由CSS+JavaScript來實(shí)現(xiàn)，當(dāng)鼠標(biāo)移到文字鏈接上時(shí)，文字呈波浪起伏的動(dòng)畫過渡效果。

HTML代碼

<p>這是一個(gè)演示 <a class="link" href="">文字鏈接</a> 鼠標(biāo)懸停動(dòng)畫效果</p>

HTML代碼結(jié)構(gòu)非常簡單，跟普通a標(biāo)簽創(chuàng)建文字鏈接一樣，該a標(biāo)簽的class屬性值為link。

CSS代碼

p .link設(shè)置文字鏈接的樣式。

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

JavaScript

本實(shí)例用到JavaScript編程，它觸發(fā)文字鏈接的鼠標(biāo)懸停動(dòng)作事件。

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

總結(jié)

本文介紹了一個(gè)CSS+JavaScript實(shí)現(xiàn)的文字鏈接鼠標(biāo)懸停動(dòng)畫效果，該實(shí)例使用非常方便，不需要改動(dòng)JavaScript代碼，喜歡的朋友可以直接下載源碼使用。

您可能對(duì)以下文章也感興趣

• 純CSS實(shí)現(xiàn)文字鏈接鼠標(biāo)懸停動(dòng)畫效果【演示/源碼】

相關(guān)文章

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

標(biāo)簽: 文字鏈接  文字動(dòng)畫  鼠標(biāo)懸停效果