舞动的灵魂
0%

发表于 分类于

本文将专注于使用 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

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

阅读全文 »

发表于 分类于

this 是什么

  1. 在 js 中，this 是一个指针型变量，它动态指向当前函数的运行环境。

  2. 在不同的场景中调用同一个函数，this 的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象 window。

  3. 在全局作用域下，this 始终指向 window。

普通函数中的 this 指向

普通函数中的 this 的值是在函数被调用时指定的。

阅读全文 »

发表于 分类于

为什么要用 worker

因为 javascript 采用的是单线程模型，也就是所有的任务都只能在一个线程上执行，当解析到一个运算量较大的 js 的时候，后面的任务只能等前面的js解析完才能进行其他操作。所以就会出现”卡死“的状态。
Web Worker 它的作用就是解决以上问题。它可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。从而营造一个多线程的运行环境，充分利用 CPU 的资源，减轻主线程的负担。

阅读全文 »

发表于 更新于 分类于

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。
我们使用 HTTP 缓存，通过复用缓存资源，减少了客户端等待时间和网络流量，同时也能缓解服务器端的压力。可以显著的提升我们网站和应用的性能。
虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的，HTTP 缓存是一个 web 性能优化的重要手段。

阅读全文 »

发表于 分类于

在开发期间，后台服务使用的是 Flask 自带的 development server，该服务不支持 websocket 协议，只支持 pollling 协议。

在项目上线时，我们需要使用生产环境的 web server，如 gunicorn，uwsgi，以及能够支持 websocket 协议的网络库： eventlet 或 gevent。

阅读全文 »

发表于 分类于

切换摄像头可以通过改变 getMediaStream 的约束条件来实现。

前置摄像头：

1
2
3
4
5
6
constraints = {
    audio: true,
    video: {
        facingMode: "user"
    }
}

后置摄像头：

阅读全文 »