这一块知识在前端中有时会用到,比如说制作描边图展示的时候。
strokeDasharray
它指的是svg图中,每一条边的描边的线长,也可以说是线宽。可以设置一个值,或者两个以及两个以上的值。
设置一个值的时候,它是指虚线的长和虚线之间的距离相等,都等于那个值。
设置两个值的时候,它是分别指虚线和的宽和虚线之间的距离。
两个以上,则宽、间距、宽循环。
strokeDashoffset
它指的是描边虚线的起点偏移量。如果说边的起点和终点为A、B,描边的起点为C、D,那么偏移量就是AC的长度。AC==0的时候,描边刚好和边。反之,只看得见部分描边。
描边图展示
strokeDasharray设置为边长,strokeDashoffset也设置为边长。此时描边虚线的长度等于边长,且虚线部分刚好完全偏移起点。svg边的部分刚好是虚线和虚线之间的距离(也就是空白),只要通过动画让偏移慢慢归零,即可实现虚线缓缓顺着边出现,即描边动画。
工具使用
未读anime.js是一个方便好用的动画库。一些使用方法将记录在此。
引入vue项目
先在终端安装依赖
12345$ npm install animejs --save``` 再在script代码块中引入```jsimport anime from 'animejs/lib/anime.es.js'
选择动画目标
1234anime({ targets:'#circle', //可以使用css选择器,也可以先选完了在这里直接用 translateX:0 //水平移动 })
设定动画初始值
1234anime({ targets:'#circle', translateX:[start,end] //在指定的位置start开始动画,在end处结束动画 })
属性关键帧
当设定不同属性的动画时,同时开始执行。如下,两组关键帧同时开始执行。x向右立刻偏移100,偏移开始时,y偏移的前摇开始,在x偏移完毕后,执行x向左偏 ...
工具使用
未读问题集1:前往此处
问题集2:前往此处
hexo安装完成后,需要进行一些小小的配置,才能拥有全部功能。比如分类啊,标签呀。还有about,也就是个人主页呀。
创建about页面
1$ hexo new page about
生成后,在source目录下的about中,编辑默认的md文件即可展示。
hexo配置自己的categories和tags
在hexo自动生成的文件夹根目录下,比如我是自己创建的kahviaBlog文件夹,hexo在里面生成了诸如source这类的文件夹。那我就在kahviaBlog文件夹中,打开控制台。输入以下命令。
12$ hexo new page categories $ hexo new page tags
指令执行完毕后,将在source目录下生成categories、tags文件夹。用编辑器打开其中的md文件。比如我的长下面这样。
12345---title: categoriesdate: 2022-08-25 14:08:25---
1234---title: tagsdate: 2022-08-25 14:39:58---
那么我只需要分别在它们的后面添加 type: cat ...
当我在前后端分离的开发中,遇到了前端请求后端数据,后端却无法判断请求的session id。经查阅和浏览器开发者工具抓包,发现每次请求都没有正常携带cookie,因而后端无法根据cookie中的session id 查找到正确的session。
在vue项目中,前端的main.js中添加如下代码即可正常携带cookie。
axios.defaults.withCredentials = true;
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick Start
Create a new post
1$ hexo new "My New Post"
More info: Writing
Run server
1$ hexo server
More info: Server
Generate static files
1$ hexo generate
More info: Generating
Deploy to remote sites
1$ hexo deploy
More info: Deployment