看到别人网站上一个好玩的下划线波浪效果:

下划线波浪效果 gif 下划线波浪效果

思路分析

其实这个主要是利用svg绘制了一段“小波浪”,绘制的时候主要用了一个C指令和S指令,绘制点如下所示:

background Layer 1 M(0,3.5) c1(5,0) C指令曲线 c2(5,-3) c3(10,-3) S指令曲线 沿用C的斜率 s1(5,3) s2(10,3) 宽度20 高度4 path指令:M0 3.5 c 5 0 5 -3 10 -3 s 5 3 10 3 c1 c2 c3 s1 s2

看看真实的"小波浪":

绘制了"小波浪",然后如何最为背景图片引用呢?一般就是把svg单独保存起来,然后background:url(***.svg),但是这里直接将svg嵌入url中,格式为background:url(data:image/svg+xml,<svg>....</svg>)。最后写一个简单的动画,让背景的图片无限重复滚动即可。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字