内容简介:byzhangxinxu from本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
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
(本篇完)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS实现波浪效果
- css做个波浪悬浮球?
- 一个灵活的,可配置的波浪动画插件
- CSS实现文字下面波浪线动画效果
- 用 radial-gradient 实现波浪效果
- Android教你一步一步从学习贝塞尔曲线到实现波浪进度条
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员面试宝典(第5版)
欧立奇、刘洋、段韬 / 电子工业出版社 / 2015-10 / 55.00
容提要 《程序员面试宝典(第5版)》是《程序员面试宝典》的第5 版,在保留第4 版的数据结构、面向对象、程序设计等主干的基础上,修正了前4 版近40 处错误,解释清楚一些读者提出的问题,并使用各大IT 公司及相关企业最新面试题(2014-2015)替换和补充原内容,以反映自第4 版以来两年多的时间内所发生的变化。 《程序员面试宝典(第5版)》取材于各大公司面试真题(笔试、口试、电话面试......一起来看看 《程序员面试宝典(第5版)》 这本书的介绍吧!