svg
承接上篇： [05天]SVG矢量图形学习 上篇主要是对svg基础做了介绍。用以满足日常svg图形的基本使用。 本篇是进阶内容，将会对svg的滤镜，动画，事件等等各特性做介绍说明。如果对svg还没有做过了解，请先阅读上篇。...
37
前言废话 听歌时偶然发现了酷狗音乐APP的歌词增加了粒子效果。感觉很酷。然后就尝试着用JS在前端实现了一下。细节和酷狗还有差距。主要是尝试一下实现思路。 先看效果： 录屏效果太差了，直接看在线演示好一些...
48
整体介绍 用过Vue, React等现代前端框架的，对此概念会很熟悉： Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。 与框架不同的是，它是原生，无任何依赖的组件方案。 先来看下Web Components的三个要素。 一、Custom elements（自定义元素）...
78
CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 mask是一个缩写属性名，其包含有： mask-image mask-size mask-repeat mask-position mask-clip mask-origin mask-mode mask-type...
51
clip-path 可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 这是一个神奇的CSS属性，值可以是以下几种 inset 剪裁成一个矩形 clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> )...
43
以前只知道outline可以不占用流体空间实现焦点，边框效果。偶然间看到一篇外网文章，打开了新世界的大门。原来outline还可以玩这么多花样。 动画一 通过将outline-ofset负偏移达到遮罩效果，再hover时正偏移到外部并减小其宽度变为一个外边框。这个实现代码相对简单...
43
微信小程序
NodeJS
小程序
NodeJS服务器环境开发部署到小程序客户端开发及部署发布的完整过程记录。 注意：这是我第一次尝试实践的结果记录。会有很多缺陷，仅供参考。 目录 一、服务器准备工作 二、开发NodeJS接口服务...
62
一直以来我都认为Canvas API中，文字的处理很麻烦。不好计算位置和边界尺寸。直到刚刚阅读掘金文章竟然发现，有相关的API。真的是有种 “难道我一直是个SB ？”。 获取文本宽度 measureText() measureText(text) 方法参数为需要测量的文本, 返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度） 例如，用红色背景完整包裹文字： const canvas = document.querySelecto...
243
前言 这是HTML5时代(ES6)可以跨过页面，页签。直接从系统层面弹出消息通知的API。 Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。 权限申请 想使用此API需要用户授权。所以需要先申请授权： Notification.requestPermission().then(function(p...
210
CSS换行
CSS不换行
CSS英文换行
CSS中文不换行
是不是在用CSS做文字排版时，经常会遇到并搜索这些问题： CSS换行,CSS不换行,CSS英文换行,CSS中文不换行，CSS标点符号不换行... 本文会解决以上的全部问题困扰！ 说大全属实有点吹牛皮了，不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住，在需要时，打开本页面当字典查阅一下就可以了。 ...
376
