byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607
之前有至少 5 个人在评论中询问我文章中链接 hover 时候波浪下划线动画是怎么实现的, 类似下图 gif 示意:
这里就介绍下是如何实现的.
有两种实现方法, 各有优劣.
一, 使用径向渐变纯 CSS 实现
就是使用径向渐变绘制我们的波浪线效果, 一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的.
所以, 我们只要使用径向渐变绘制圆弧, 再通过 background-position 控制两个圆弧的位置, 让其前后拼接在一起就可以实现波浪线效果.
相关 CSS 代码如下:
- .flow-wave {
- background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
- radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
- background-size: 20px 20px;
- background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
- }
实时效果如下 若无效果请访问原页面地址: https://www.zhangxinxu.com/wordpress/?p=8607 :
有了静态的波浪线效果, 剩下的就像这个波浪线动起来, 用 CSS3 animation 动画控制 background-position 位置即可.
- .flow-wave {
- animation: waveFlow 1s infinite linear;
- }
- @keyframes waveFlow {
- from { background-position-x: -10px, 0; }
- to { background-position-x: -30px, -20px; }
- }
于是波浪线动画效果就实现了.
您可以狠狠地点击这里: CSS 径向渐变模拟波浪线 demo
这种方法实现的优点是颜色控制非常方便, 例如, 我们修改文字颜色为原谅绿, 弯弯水波的颜色也变成了原谅绿:
此方法实现的不足就是: 理解成本有点高, 如何使用 CSS radial-gradient 模拟波浪线效果是需要相当的 CSS 功力积累的, 上手不太容易, 以后要修改个尺寸什么的也不太好维护. 同时, 在普通屏幕密度屏幕下的 Chrome 浏览器上, 线条并不平滑, 吹毛求疵的设计师不一定会接受.
此时, 可以试试下面这种更利于理解的方法.
二, 使用 SVG 波形矢量图作为背景
就是我们直接使用一个使用 SVG 波形矢量图作为背景, 不用自己去手动 CSS 绘制, 代码量差不多, 还更容易理解. CSS 代码示意:
- .svg-wave {
- background: url("data:image/svg+xml,") repeat-x 0 100%;
- background-size: 20px auto;
- }
实时效果如下 若无效果请访问原页面地址: https://www.zhangxinxu.com/wordpress/?p=8607 :
有了静态的波浪线效果, 剩下的就像这个波浪线动起来, 用 CSS3 animation 动画控制 background-position 位置即可.
- .svg-wave {
- animation: waveMove 1s infinite linear;
- }
- @keyframes waveMove {
- from { background-position: 0 100%; }
- to { background-position: -20px 100%; }
- }
此方法就是我博客链接使用的方法.
优点是线条边缘平滑, 效果细腻, 易理解, 易上手, 易维护.
缺点也很明显, 就是波浪线的颜色无法实时跟着文字的颜色发生变化, 适用于文字颜色不会多变的场景.
如果我们想要改变波浪线的颜色也很简单, 修改 background 代码中的 stroke='#333' 这部分, '#' 就是就是 # , 因此, stroke='#333' 其实就是 stroke='#333' 的意思. 例如, 我们需要改成红色略带橙色, 可以 stroke='#F30' , 也可以写完整 stroke='#FF3300' .
这个颜色就是我博客链接波浪线的颜色, 如下图:
大家可以根据自己实际开发的场景选择合适的方法.
三, 每当要结束的时候
text-decoration 属性早已支持波浪线下划线:
text-decoration-style: wavy;
效果如下截图:
可以看到, 线好粗好不协调, 而且字符和装饰线发生重叠的时候, 装饰线直接消失了, 结果波浪线变成了一截一截的, 还需要使用 text-decoration-skip 进行额外控制. 因此, 实际开发, 不建议在实际项目中使用.
而且你无法预知每个波浪线重复片段的宽度, 想要无限运动理论上就不太可行.
因此, 文字或者图形的波浪线动画效果不能使用 text-decoration 的波浪线.
PS:text-decoration 新增不止波浪线, 还有虚线点线等, 有兴趣可以参阅我之前写的 "了解 CSS3 text-decoration 波浪线等新特性 https://www.zhangxinxu.com/wordpress/?p=4831" 这篇文章.
最后, 写一首诗吧:
每当要结束的时候,
我总想再扯点什么.
追问癖好源自哪里?
远方那里有个孤岛.
来源: http://www.tuicool.com/articles/AVN3Ere