- 博客(14)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 css-赛博朋克风动画组件
css-赛博朋克风动画组件 目录文章目录前言结果展示代码前言Tutorials收费课程中的一种实现。实现思路：先绘制盒子制作动画，通过颜色位置变化来实现流转-webkit-box-reflect: below 2px linear-gradient(transparent,#0005);实现倒影所用功能：border-sizingjustify-contentdisplayoverflowtransition-webkit-box-reflectbox-sh
2021-04-23 09:26:24
795
1
原创 css-方形组件圆形阴影和动画
css-方形组件圆形阴影和动画 目录文章目录前言效果代码前言CSS特效思路：1个div包裹4个，最外层作为阴影来源，内部4个作为补齐补板。主要用到以下：border-radiusbox-shadow@keyframe, animationz-indextransitionposition, top, left效果代码<!DOCTYPE html><html lang="en"><head> <meta chars
2021-04-23 09:05:33
265
原创 js-拖拉表格实现内容计算-在线excel
js-拖拉表格实现内容计算 目录文章目录前言实现结果代码实现`index.html``main.js`前言制作网页版ExcelH5新增功能：可拖拉-draggable, 可编辑-contenteditable实现结果代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Table</titl
2021-04-18 18:31:13
295
原创 webpack-AST剖析
webpack-AST 目录文章目录前言推荐阅读拆解函数`AST`工具 - `recast`制作模具 - `recast.types.builders`如何改装实战 - 命令行修改`js`文件`recast.visit` - `AST`节点遍历`TNT` - 判断`AST`对象类型`AST`修改源码，导出全部方法`Builder`实现一个箭头函数`exportific`前端工具使用`NPM`发包前言抽象语法树(AST)，是一个非常重要的知识JavaScript的语言精髓可以制作Vue, Rea
2021-04-15 14:57:35
1190
原创 webpack-模块热替换剖析
webpack-模块热替换剖析 目录文章目录前言推荐阅读前提`HMR`应用开启`HMR`开启`webpack-dev-server`的`HMR`手动添加代码`HMR`原理步骤前言主要讲解热更新的原理推荐阅读《webpack实战 入门、进阶与调优》前提早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码第一次提升效率：工具检测到代码改动，自动重新构建，然后触发网页刷新，称为：live reload第二次提升：webpack不刷新的前提下得到改动，甚至不需要重新发起请
2021-04-15 00:50:17
207
原创 js-基于AudioContext在canvas上显示声音波形
js-基于AudioContext在canvas上显示声音波形 目录文章目录前言效果展示代码展示`index.html``Aud.js`前言从ES7后开始启用AudioContex常用API是：createScriptProcessor, onaudioprocess, getChannelData注意：onaudioprocess已经废弃，开始改用AnalyserNode，MDN-AnalyserNode效果展示代码展示index.html<!DOCTYPE html>
2021-04-08 01:06:04
1170
原创 js-通过audioContext实现3D音效
js-通过audioContext实现3D音效 目录文章目录前言效果展示代码展示前言AudioContext的setPosition实现3D音效效果展示代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D Audio</title> <style> body, div
2021-04-07 01:31:45
556
1
原创 js-获取flv流文件二进制数据并分析
js-获取flv流文件二进制数据并分析 目录文章目录前言效果展示代码实现`index.html`前言对flv流文件，进行16进制转换，并用js解析效果展示代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Video</title> <style>
2021-04-06 15:10:51
857
原创 js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据
js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据 目录文章目录前言推荐阅读常见`API`代码实现`audio.html``streamFile.php`总结前言尝试利用浏览器中的audio API推荐阅读MDN常见APIAudioContextdecodeAudioData代码实现audio.html<!DOCTYPE html><html lang="en"><head> <meta char
2021-04-06 03:06:31
869
原创 JS-indexedDB和应用
JS-indexedDB和应用 目录文章目录前言推荐阅读本地存储`indexedDB``open``createObjectStore``add``get`遍历数据更新数据-`put``delete`使用索引 - `createIndex`应用场景前言前端数据库，webSQL的替代品推荐腾讯的离线日志reflow- Tent-reflow推荐阅读MDN - IndexedDBlocalForage：一个简单的 Polyfill，提供了简单的客户端数据存储的值语法。它在后台使用 Inde
2021-04-05 16:08:49
550
原创 图形学-RayTracingonOneWeek
RayTracingonOneWeek 目录文章目录前言推荐0. 概述1. `CodeBlocks`环境搭建`C++`程序2. 目标1. 输出图像注意2. `The vec3 class`头文件`operator`重写针对位置的使单位向量与输入向量的方向相同更改头文件去使用全部代码`vec3.h``vec3.cpp`3. 光线，简单相机和背景`ray.h`4. 添加球体5. 曲面法线和多个对象6. 抗锯齿`camera.h``main.cpp`7. 漫反射材质`main.cpp``main.cpp``dr
2021-04-04 19:57:24
766
原创 js-前端video播放器
js-前端video播放器 目录文章目录前言推荐阅读传统播放模式视频切片 - `Accept-Ranges`服务器端请求特定的范围单一范围多重范围条件式范围请求范围请求的响应流媒体`Blob`Blob vs ArrayBuffer`Ajax``HLS`HLS 自适应比特流`m3u8`讲解文件列表`DASH`西瓜视频播放器`DASH`例子中的`MPD`文件`FLV`头文件`flv.js`工作原理播放器截图`canvas`播放视频前言Video, Blob URLHTTP RangeHLS, DA
2021-04-02 18:44:25
1316
原创 JS-前端二进制
JS-前端二进制 目录文章目录前言推荐阅读整体介绍图片预览1. `FileReader API`常见优化`Base64`编解码`Base64`的函数`btoa``atob`下载图片`fetch API``Object URL`缺点`Blob API``Blob`的构造函数**从字符串创建 Blob****从类型化数组和字符串创建 Blob**`Blob`方法`ArrayBuffer`和`TypedArray``ArrayBuffer``Unit8Array``ArrayBuffer`和`TypedArra
2021-04-02 14:50:36
202
原创 H5-MediaSourceExtension
H5-MediaSourceExtension 目录文章目录前言推荐阅读介绍诞生原因`MSE`标准缺点注意`DASH`协议优势常见特点缺点与对比接口`MediaSource`注意解决办法`Media Source Extension`转码开始测试的视频需要的工具引入方法检测片段基于`Fetch API`前言推荐阅读MDN-MSE APIH5直播系列二 MSE(Media Source Extensions)-MSE-简书官方文档翻译介绍媒体源扩展 API（MSE） 提供了实现无插件且
2021-04-01 20:30:25
370
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人