[小技巧]如何用css3实现导航栏像音符一样跳动起来

Posted 2021-04-09 UI设计自学平台

微信关注「网页设计自学平台」

最近一些小朋友们会跑来问，这样像音符一样跳动的效果如何实现

今天给大家分享一下非常容易通过一个代码就可以实现了！

首先把你要的导航栏输入一下

这里我输入了五行“hello”

注意，每个hello后面偶读跟了一个div，命名叫line

知道这个是用来干嘛的吗？

它是用来实现每个hello后面的那跟横线的

接下来把该规范css样式的标签都写一下

注意这里的text-shadow，它是用来实现文字发光的一个属性

line这里一开始给了width宽度为零

只有当鼠标划上去的时候，它才会出现，并且变长

这里给li加了一个鼠标覆盖的效果

你会发现原来text-shadow可以给多个参数

这样可以实现光效的叠加

注意这里的第一行代码用来实现字符间距变大

这样就实现了字符跳动的效果

最后来一个li鼠标覆盖的时候line的变化

width宽度变为50%长度（之前鼠标没覆盖的时候是零）

推荐阅读：

戳“阅读原文”入群免费领取前端开发教程