卡卡网

前面介绍过一个纯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按钮鼠标悬停效果（背景颜色渐变动画）

标签: 文字链接  文字动画  鼠标悬停效果