加载中
webpack inline loader 打包 worker

https://www.webpackjs.com/loaders/url-loader/ https://webpack.js.org/concepts/loaders/#inline 几种常见写法, 可以通过?设置参数 It's possible to specify loaders in an import stat...

css 常用色值表

参考 http://tool.c7sky.com/webcolor/ https://www.cssportal.com/css3-color-names/ http://www.colors.commutercreative.com/grid/ https://tool.oschina.net/commons?type=3 最终选用css...

10/17 19:23
14
canvas 导出图片的大小计算

最佳做法使用promise封装一下, 比toDataURL会占用更少的内存, 同时大小计算也更加精确 const p = await new Promise((r) => { rawImage.canvas.toBlob( (data) => { co......

10/17 13:28
19
css 使用transform-origin实现绕顶点旋转

通过animejs 设置旋转角度和循环 通过 transform-origin 设置旋转中心点 注意元素的中心是left, top加上宽和高的一半, 不能单单使用left和top定位, 会出现一些问题 <!DOCTYPE html> <html la...

10/13 23:19
0
区分pc还是移动端

主要目的是区分pc的移动端模式 在这个模式中, chrome会模拟移动端, 注入很多pc端没有的东西, 并且会修改ua, 添加一些touch事件等 根据测试可以使用Window.orientation 在pc端该字段为undefin...

10/12 22:10
12
利用anime和rematrix进行动画叠加

https://github.com/juliangarnier/anime https://github.com/jlmakes/rematrix#readme 思想为, 使用anime的数值库, 计算执行过程中的百分比, 获得数值差, 然后利用矩阵相乘叠加效果 注意长度...

10/11 23:23
3
从animejs中学到的一些东西

这个库就一个文件.... 播放动画, 使用 requestAnimationFrame , 会将当前时间传入 cb中, 根据时间获得百分比, 然后计算参数, 设置样式数据 const engine = (() => { function play() { raf ...

10/11 21:14
0
使用增量矩阵解决同时修改transform导致的冲突问题

一般做法 类似animejs等, 直接修改dom的style属性中的 transform 值 对于单独修改的情况下没啥问题, 但是如果同时修改就会导致相互覆盖, 比如在向右移动的过程中, 向下移动或者进行放大操作,...

10/10 20:49
8
MutationObserver 浏览器dom操作监听

参考 https://segmentfault.com/a/1190000023707760 https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver https://developer.mozilla.org/zh-CN/docs/Web/API/MutationRecor...

10/04 16:32
28
在线 ocr 文字识别 和 图片色值选取

图片颜色选取 https://tool.ahaoboy.com/#/color-pick 鼠标悬浮提示, 十字交叉点为取色点, 点击取色并固定小色盘, 也可以在小色盘中取色 支持多颜色空间转换, 提供数组和16进制的字符串 在线...

10/01 15:08
21
Shadow DOM 和 lit-html 的简单使用

参考 https://lit-html.polymer-project.org/ https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM Shadow DOM 边框, 字体颜色和 margin分别通过三种方式加的, 在...

09/26 17:05
33
clip-path 配合animejs 实现动画

首先 dom结构 <div id="box1" class="box"> <img id="img1" class="img" src="../t.jpg" alt="" /> </div> 如何在有背景图片的情况下, 使用css为图片添加和ppt类似的出现动画, 并且在动画执行...

09/24 22:54
28
netlify 上部署的app 使用 name 的https域名

https://www.name.com/ https://app.netlify.com/ 1, 部署网站 2, 添加https证书 3, 为网站设置自己的域名 1, 部署网站 https://my.oschina.net/ahaoboy/blog/3119867 添加https 证书 https:...

09/19 21:33
52
鸿蒙 ace_lite_jsfwk 项目 瞅了一眼

本文所见的所有问题, 其实都是非核心问题, 就和9x9乘法表背的再熟练也不可能会微积分一样, 对于这种上层应用来说, 这些问题无关大雅, 重要的是核心技术而非茴有多少写法, 以及那种写法更好看...

09/13 22:58
867
Firefox 特性 svg mask 和clip-path的区别

效果是裁剪一张矩形图片, 对于mask来讲, 点击圆形区域和矩形区域都会触发点击事件 但是对于clip-path来讲, 只能点击圆形区域才能触发点击事件 chrome不支持在mask中使用svg, 但是clip-path和...

09/12 16:19
58
状态同步和帧同步

https://www.jianshu.com/p/9b7fdf9c9272 状态同步复杂度在服务端, 帧同步复杂度在客户端... 场景假设: 对战类游戏, 每个人有血条, 技能, 位置, 蓝量等 A攻击B, C看到了 帧同步: 所有消息直接...

08/26 22:32
88
animejs 简单 包装

目的, 为了能够使用animejs对动画进行细粒度的操作, 也为了能够在一些简单情况下使用promise链式操作, 比如多个动画串行等待执行可以直接for循环加await, 可以将动画的执行做封装, 但是可以看...

08/26 21:28
42
CSSStyleDeclaration  保存dom元素的style

可以用下面这个库转换对象格式为字符串格式 https://www.npmjs.com/package/to-style const toStyle = require('to-style'); const style = { width: 100, height: '100px', 'font-size': '1...

08/21 22:36
33
clip-path 绘制css常见图形 制作有趣的动画

参考 https://www.imliyan.com/blogs/article/%E4%BD%BF%E7%94%A8clip-path%E7%BB%98%E5%88%B6CSS%E5%9B%BE%E5%BD%A2/ 五角星 <div class="star"></div> .star { width: 200px; height: 200...

08/12 22:40
59
serve 和 http-server 对比

两个都是一个静态资源工具 npm i serve http-server -g https://github.com/http-party/http-server#readme https://github.com/vercel/serve#readme 由于遇到了cors问题, 目前选择http-serv...

08/11 20:50
66

没有更多内容

加载失败,请刷新页面

返回顶部
顶部