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

    下划线波浪效果     

    思路分析

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

           

    看看真实的"小波浪":

    小波浪        

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

    注意上面需要将svg代码进行encode编码,具体操作参见:html中使用svg图片的两种内联写法

    回到顶部
    我要评论

    所有评论

      相关文章