伍-酷狗歌词文字粒子效果JS实现
前言废话
听歌时偶然发现了酷狗音乐APP的歌词增加了粒子效果。感觉很酷。然后就尝试着用JS在前端实现了一下。细节和酷狗还有差距。主要是尝试一下实现思路。
先看效果：
录屏效果太差了，直接看在线演示好一些
肆-Web Components
整体介绍
用过Vue, React等现代前端框架的，对此概念会很熟悉：
Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。
与框架不同的是，它是原生，无任何依赖的组件方案。
先来看下Web Components的三个要素。
一、Custom elements（自定义元素）
叁-CSS属性之mask
CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
mask是一个缩写属性名，其包含有：
- mask-image
- mask-size
- mask-repeat
- mask-position
- mask-clip
- mask-origin
- mask-mode
- mask-type
贰-CSS属性之clip-path介绍
clip-path
可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
这是一个神奇的CSS属性，值可以是以下几种
inset
剪裁成一个矩形
clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> )
壹-CSS之outline动画
以前只知道outline可以不占用流体空间实现焦点，边框效果。偶然间看到一篇外网文章，打开了新世界的大门。原来outline还可以玩这么多花样。
动画一
通过将outline-ofset负偏移达到遮罩效果，再hover时正偏移到外部并减小其宽度变为一个外边框。这个实现代码相对简单
记第一次开发微信小程序全过程
NodeJS服务器环境开发部署到小程序客户端开发及部署发布的完整过程记录。
注意：这是我第一次尝试实践的结果记录。会有很多缺陷，仅供参考。
目录
-
一、服务器准备工作
-
二、开发NodeJS接口服务
Canvas中的文字居中和宽度
Notifications API系统通知
CSS文字折行知识大全
是不是在用CSS做文字排版时，经常会遇到并搜索这些问题：
CSS换行,CSS不换行,CSS英文换行,CSS中文不换行，CSS标点符号不换行...
本文会解决以上的全部问题困扰！
说大全属实有点吹牛皮了，不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住，在需要时，打开本页面当字典查阅一下就可以了。