CSS text-decoration实现宽度100%波浪线效果

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9333

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、之前使用渐变的实现方法

之前有使用过 CSS radial-gradient径向渐变 实现过波浪线效果。

让我找找在哪里实现的……

♫ ♬ ♪ 找啊找啊，找朋友找到一个好朋友，敬个礼……牵牵手……♩ ♭ ♪

啊，找到了，之前有篇文章介绍过：“ CSS实现文字下面波浪线动画效果 ”，里面介绍了2种方法可以实现下图所示的波浪线效果：

其中一个方法就是CSS渐变实现，不过这个方向虽然看上去还挺屌的，但是实际上挺屌的，学习难度挺屌的，下面是demo页面相关代码截图：

如果说隔壁张三想要调整下波浪线的尺寸，怕是头发都要少掉好几根。

文章最后提到了 text-decoration 与下划线，当时我的建议是：

因此，实际开发，不建议在实际项目中使用。而且你无法预知每个波浪线重复片段的宽度，想要无限运动理论上就不太可行。

我仔细琢磨了上面这一段话，发现打脸了，幸好，当时说话没有那么绝，否则现在脸估计都打肿了。

最近我突发灵感，突然想到如何使用 text-decoration 实现长的波浪线效果了，不会有和文本skip重叠或跳过的问题，而且可以脱离文本实现宽度自适应。

因此，在实际项目中使用是可以的，这部分打脸了。后面则没有问题，实现无限运动的动画效果呢，就有点悬，因为不同浏览器像他那个波段的宽度是不一样的，要想实现无缝连接的无限运动效果还是有点难度的，得要人我再好好想想。

不过如果只是想实现一个静态的波浪线效果，则我发现 text-decoration:wavy 是个不错的实现。

二、text-decoration与宽度自适应波浪线

我们在文章和布局中经常会用到分隔线，传统的分隔线都是一条直线，或者虚线，或者点线，颠来倒去就这些，早都已经看腻了。

你说我们是不是可以用波浪线来进行分隔呀，就像下面这样的实时效果（不支持浏览器为直线），说不定设计师小姐姐和小哥哥们看完效果之后会对你交口称赞。

实现的代码如下：

wavy {
    display: block;
    height: .5em;
    white-space: nowrap;
    letter-spacing: 100vw;
    padding-top: .5em;
    overflow: hidden;
}
wavy::before {
    content: "\2000\2000";
    /* IE浏览器实线代替 */
    text-decoration: overline;
    /* 现代浏览器 */
    text-decoration: overline wavy;
}

此时，只要在页面上插入下面这段HTML代码，就会有波浪线效果了。

<wavy></wavy>

截图效果示意：

波浪线实现原理

伪元素生成两个空格，使用 letter-spacing 属性控制两个空格占据的宽度足够宽，这样空格字符的装饰线的尺寸一定可以充满整个容器，此时只要设置装饰线的类型是波浪线，宽度100%自适应的波浪线效果就实现了。

优点

这种实现方法的优点在于非常容易理解，非常容易上手，然后的话颜色很好控制，使用 color 属性就好啦。大小也非常容易控制，使用 font-size 属性就好了。

不足-兼容性

这个方法缺点就在于兼容性不太够， wavy 本质上 text-decoration-style 属性的值，不过由于Safari浏览器并不支持 text-decoration-style 属性，因此，Safari浏览器下没有波浪线效果，这个有点头疼，因此， text-decoration:wavy 实现的波浪线效果只适合用在体验渐进增强的场景。

例如本文所示的分隔线场景，如果浏览器不支持，那还是回到以前的直线效果，如果浏览器支持，就使用更好的波浪线效果。

什么？你问IE浏览器的兼容性如何？

那还要说吗？还要说吗？毫无疑问，肯定……不支持！

三、一点小小的end雨

下周一开始我们开始正常复工上班啦！

在家里闷了整整一个月，这个身体状态明显感觉下降。

上周四周五啊，来回走了1km的路去银行办个事情。

结果第二天左脚小腿肌肉痛，右脚大腿肌肉痛，我去这是有多缺运动啊。

而且在家里宅了一个月，最大的问题是视力感觉明显下降，目之所及而不超过五米，总是盯着近处的物体看，我担心过不了几年，自己的视力估计就要高度近视玩完，无法剧烈运动了。

sign~

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9333

（本篇完）