CSS实现文字下面波浪线

方法1.使用径向渐变绘制我们的波浪线效果

一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。

所以，我们只要使用径向渐变绘制圆弧，再通过background-position控制两个圆弧的位置，让其前后拼接在一起就可以实现波浪线效果。

.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);
}

方法2.使用SVG波形矢量图作为背景

.svg-wave {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%; background-size: 20px auto;
}

自己试了一个两种方式还是比较喜欢第二种。效果图如下：

第一种的效果：

CSS实现文字下面波浪线相关推荐

CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
HTML怎么在字体下方加波浪线,CSS实现文字下面波浪线动画效果
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607 本文可全文转载,个人网站无需授权,但需要保留原作者.出处以及文中链接,任 ...
html怎么在字体中加波浪线,强大的CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...
web前端入门到实战：CSS文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
html文字添加波浪线,利用css渐变给文字下方加波浪线
具体代码如下 .wavy-line-decoration { position: relative; line-height: 1.5em; } .wavy-line-decoration::befo ...
html给文字添加波浪线,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
关于如何用 CSS 实现不同类型波浪线
1. 样式一 <div class="box"><div class="wave"></div> </div> ...
如何去除word文档中文字下方的红色波浪线
首先,我们打开一个带有文字红色波浪线的word文档: 然后我们选中文档中的所有文字: 之后我们点击工具栏中的审阅: 之后我们点击拼写和语法: 弹出的界面,我们点击忽略全部: 弹出的界面,我们点击否:

CSS实现文字下面波浪线

方法1.使用径向渐变绘制我们的波浪线效果

方法2.使用SVG波形矢量图作为背景

CSS实现文字下面波浪线相关推荐

最新文章

热门文章