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

栏目: IT技术 · 发布时间: 4年前

内容简介:byzhangxinxu from本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

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

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

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

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

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

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

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

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

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

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

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

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

文章最后提到了 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浏览器的兼容性如何?

那还要说吗?还要说吗?毫无疑问,肯定……不支持!

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

三、一点小小的end雨

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

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

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

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

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

sign~

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

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

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

(本篇完)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员面试宝典(第5版)

程序员面试宝典(第5版)

欧立奇、刘洋、段韬 / 电子工业出版社 / 2015-10 / 55.00

容提要 《程序员面试宝典(第5版)》是《程序员面试宝典》的第5 版,在保留第4 版的数据结构、面向对象、程序设计等主干的基础上,修正了前4 版近40 处错误,解释清楚一些读者提出的问题,并使用各大IT 公司及相关企业最新面试题(2014-2015)替换和补充原内容,以反映自第4 版以来两年多的时间内所发生的变化。 《程序员面试宝典(第5版)》取材于各大公司面试真题(笔试、口试、电话面试......一起来看看 《程序员面试宝典(第5版)》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具