舞动的灵魂
0%

发表于 分类于

需求场景

我们知道，token 用于保持会话和用户身份认证，它具有时效性。之前的策略是，一旦 token 过期，就强制用户重新登录，如果此时用户正在操作表单，提交时突然被强制登录，那用户体验实在太差了。

正确的策略是，如果该用户是活跃用户的话，当 token 过期时，动态地刷新 token，延长时效。若该用户不是活跃用户，则强制重新登录。

阅读全文 »

发表于 分类于

vue-router 动态修改路由的 api 有两个：addRoute 和 removeRoute。

具体用法请见 (API 参考 | Vue Router)。

注意：

（1）通过 addRoute 和 removeRoute 添加或删除路由后，不会改变 getRoutes 的结果。

（2）由于是通过函数动态添加的，那么当 vue 实例重新加载时，这些路由就没有了。因此，刷新页面或者通过 url 访问的时候就会出现白屏。

阅读全文 »

发表于 分类于

GSAP（GreenSock Animation Platform）是一个从flash时代一直发展到今天的专业动画库。

GSAP提供4个库文件供用户使用：

  • TweenLite

  • TimelineLite

  • TimelineMax

  • TweenMax

TweenMax 是 GSAP 平台中功能最全的动画工具，可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。

它是纯 js 动画。

阅读全文 »

发表于 分类于

Grow Shadow

1
2
3
4
5
6
7
8
9
10
11
12
13
<h3 class="hover-1">Hover Me</h3>

<style>
.hover-1 {
  background-color: #1095c1;
  color: #ffffff;
  transition: .4s;
}
.hover-1:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .5);
}
</style>
阅读全文 »

发表于 分类于

本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果，但是实际上并不会为这些文本制作任何文本阴影效果。

text-shadow 语法
1
text-shadow: h-shadow v-shadow blur color;
参数 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

text-shadow 为文字添加阴影，而且可以添加多个阴影，用逗号分隔。若我们将 blur 属性设置为 0 或不设置，那么就可以得到清晰的文本，然后可以通过 h-shadow，v-shadow 调整位置，color 调整颜色。


阅读全文 »

发表于 分类于
background-clip
1
background-clip: text|border-box|padding-box|content-box;

background-clip: text 其核心就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

简单而言，就是运用了 background-clip: text 的元素，其背景内容只保留文字所在区域部分。

但是目前 background-clip 只在 chrome 上得到很好的支持。

阅读全文 »

发表于 分类于

本文将专注于使用 CSS background 属性来实现炫酷的鼠标悬停效果。

background 语法
1
background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment

各值之间用空格分隔，不分先后顺序。

background-position 与 background-size 之间用”/“分隔。

一个元素可以有多个背景效果，通过”,“分隔。

background-position 与 background-size 的关系

  1. 当 background-size 为 100% 时，background-position 百分比无效；

  2. 当 background-size 小于容器大小时，背景图片随着 background-position 百分比的增大向右/下移动；

  3. 当 background-size 大于容器大小时，背景图片随着 background-position 百分比的增大向左/上移动；

  4. 当 background-position 为具体值时，无论 background-size 为多大，背景图都随着 background-position 的增大向右/下移动，反之向左/上移动。


阅读全文 »

发表于 分类于
安装

下载前先确保原有 node 已经卸载。

下载地址：[Releases · coreybutler/nvm-windows · GitHub。

下载 nvm-setup.exe，点击后根据提示安装，nvm 的安装路径可改，symlink 的安装路径默认。

安装完成后打开 cmd，执行以下命令：

1
nvm

有东西打印出来即安装成功。

阅读全文 »