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

下划线波浪效果     

思路分析

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

       

看看真实的"小波浪":

小波浪        

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

注意:Chrome中,background中的svg颜色不能直接使用#,要用%23代替#,例如#ccc,要写成%23ccc,否则颜色无效。可能存在转义问题。

回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

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

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字