使用 CSS 和 JS 实现博客导航栏线条动画效果
本文最后更新于:2024年11月2日 下午
使用 CSS 和 JS 实现博客导航栏线条动画效果
制作 SVG
说白了线条动画 / 路径动画就是通过 SVG 的 path 属性(什么是 SVG?)来实现的。所以首先我们得准备好一个能用的 SVG 图。
方法一
你可以使用 Adobe 的 adobe illustrator 来徒手绘制 svg 图。
怎么操作呢,就是创建好画布之后直接使用铅笔 / 钢笔 / 画笔等工具进行一个手画。
例如使用铅笔工具:
左边能看到路径锚点,右边能看到各个图层。
紧接着将其导出为 svg:
你可以在这提前查看。
导出后的 svg 大致是:
其中 <defs><style>.a{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs>
是非必须的,viewBox
、xmlns
和 path
等节点是必须的。
我们这种效果最关心的是 path
节点。
方法二
你也可以使用 adobe illustrator 的文字工具指定字体,来生成好看的字体效果,例如:
这个时候你只需要用选择工具,框选文字转换轮廓就可以得到复杂路径图层:
创建之后,按住 ctrl 键,你会发现文字上就出现了许多路径锚点:
图层中也自动有了每个字母的复合路径:
可以和方法一一样直接导出了。
方法三
借助在线网站:Google Font to Svg Path 完成 Svg 的生成。
该网站提供谷歌字体供选择,也支持自己上传字体,使用起来是很方便的。
其中:
- variant:表示你选择的字体的风格 —— 正常还是斜体
- text:输入你要生成 svg 的语句或单词
- union:这个影响 svg 路径,是否要将字母看作整体
- kerning:字距
- separate characters:字符是否分离
- bezier accuracy:跟字体像素有关
- Dxf Units:尺寸单位
- Fill:填充颜色
- Stroke:线条颜色
- Stroke Width:线条宽度
- Non-scaling stroke:是否可缩放
- Fill rule:填充的规则
参数的变动会实时的更新在下方的 svg 元数据框中。
编写 js
有了上述方法,可以得到 svg 图。这里简单说说我的方案:
- 字体:Signerica_Medium
- Google Font to Svg Path:仅 Union 勾选,Size 为 100。其余默认
- 待生成文字为:CiaoHello
svg 数据如下:
有了 svg 之后,在 hexo 博客的 source\js
目录下创建 sign.js
为什么这么写?
这里主要是利用浏览器开发者工具查看你的网站元素结构,找到导航栏的标题位置:
可以看到类名为 navbar-brand
的就是导航栏的标题区域,我们就是要将 svg 放在这里。
上图我已经做出修改,如果没有进行修改的话,你这里的 <svg>
标签应该是依照你的_config.fluid.yml
中设置的导航栏标题也就是 <strong>
标签。
修改的语句也很简单,先找到父亲 navbarBrand
接着使用.innerHTML
设置为 svg 即可:
这样只是先将 svg 放在这里了,还需要明白怎么写动画。
可以参考文章:https://juejin.cn/post/6955857586922979364
或者视频:https://www.bilibili.com/video/BV1Qi4y1Y7Sp/
真不是摆烂,大佬讲的是真香
所以现在还需要知道每条 path 的长度,可以使用当前选择的元素.getTotalLength()
得到:
如果你在之前生成 svg 的时候,生成了多条 path,这里你应该使用的是:
给每条 path 设置上行内样式为变量 --l
方便后面 css 的编写。
编写 CSS
在 source\css
目录下创建 sign.css
:
通过样式变量使得 stroke-dasharray
和 stroke-dashoffset
属性能轻易获取到 path 的长度,也就方便了 @keyframes stroke
的编写。
另一个方法
其实有个库可以实现这种效果:Vivus.js
demo:https://maxwellito.github.io/vivus/
GIthub 地址:https://github.com/maxwellito/vivus
使用方法也很简单,只要给 svg 标签加上 id 即可: