Giters

Allan5945 / xiaozhi

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

我不是什么大牛，我其实想做的就是一个传播者。内容可能过于基础，但对于刚入门的人来说或许是一个窗口，一个解惑之窗。我要先坚持分享20年，大家来一起见证吧。

每年至少会分享不少于200篇的优质文章，如果想第一时间获取文章，大家可以去【公众号】获取或者加我【微信】提意见(别忘记Star哟)。

微信群 公众号 公众号 公众号 投稿 投稿 投稿

大家都说简历没项目写，我帮阿里云团队的师兄推广服务器，比较便宜：一年 74 ，三年 223, 119一年 香港(免备案) ，比学生9.9每月还便宜，买来送自己，送女朋友，买了搭建个项目给面试官看也香，还可以熟悉技术栈.

←点击或者扫码购买↓

《CSS创意特效》已开通，目前在更新中

专栏地址：https://blog.csdn.net/qq449245884/category_9873715.html?utm_source=ffzl_BWzd

专栏目录

01.文字波动效果

02-涟漪动画效果

03-视频字幕悬停效果

04-新拟物单选按钮样式

05-全屏视频背景滚动淡出

06-创意产品卡设计

07.创意菜单项悬停效果

08.怎么配合视频做好 CSS 特效

09.制作有个性的滚动条

10.BoxShadow 初级到高级特效

11.仅使用CSS对任何SVG图标进行动画处理

12.使用 CSS3 实现响应式推荐卡片

13.纯CSS实现新拟物炫酷时钟

14.使用 CSS Grid 实现瀑布流布局

15.2.5D视差效应

16.令人震惊的动画和悬停效果

17.圆形进度条

18.CSS 3D透视图与分层图像悬停效果

19.显示隐藏密码框

20.CSS3等距卡悬停效果

21.按钮悬停特效

22.文字肖像和鼠标移动视差效果

23.输入框验证特效

24.粘性导航特效

25.有趣的子弹声特效

26.基于URL操作样式类

27.扁平长阴影特效

28.发光复选框特效

29.发光加载特效

30.鼠标移动多彩心特效

31.定价卡悬停特效

32.图像扭曲悬停特效

33.视频滑块特效

34.像素化图像悬停特效

35.按钮悬停效霓虹灯特效

36.笑脸评分栏特效

37.鼠标移动线条特效

38.鼠标移动追加元素并在几秒钟后删除元素

39.粘滞滚动特效

40.新拟物 checkbox 特效

41.clip-path 滚动特效

42.波浪div动画效果

43.滚动倾斜的背景特效

44.新拟物登录表单特效

45.新拟物登录表单夜间特效

46.很棒的图标悬停特效

47.霓虹灯按钮动画效果的悬停

48.窗帘响应菜单特效

49.新拟物按钮悬停效果

50.新拟物卡片悬停特效

51.3D图像悬停特效

52.响应式剪贴蒙版视差滚动效果

53.网站夜间特效

54.使用CSS创建自定义滚动条

55.CSS3创意按钮悬停特效

56.3D编辑文本特效

57.响应盒模型特效

58.数字时钟特效

59.弹出框与模糊的背景特效

60.动画按钮边框悬停特效

61.反射属性-webkit-box-reflect应用

62.渐变发光加载动画特效

63.响应卡悬停特效

64.圣诞横幅动画特效

65.新年倒计时特效

66.电视噪音动画特效

系列目录

视角

  1. 10个技巧，帮咱们更快更好的学习编程

JavaScript是如何工作的系列

  1. JavaScript是如何工作的：引擎，运行时和调用堆栈的概述

  2. JavaScript是如何工作的：深入V8引擎&编写优化代码的5个技巧

  3. JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏

  4. JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式

  5. JavaScript是如何工作: 深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径

  6. JavaScript是如何工作的:与 WebAssembly比较 及其使用场景

  7. JavaScript是如何工作的:Web Workers的构建块+ 5个使用他们的场景

  8. JavaScript 是如何工作的：Service Worker 的生命周期及使用场景

  9. JavaScript是如何工作的:Web推送通知的机制

  10. JavaScript是如何工作的:使用 MutationObserver 跟踪 DOM 的变化

  11. JavaScript是如何工作的:渲染引擎和优化其性能的技巧

  12. JavaScript 是如何工作的：深入网络层 + 如何优化性能和安全

  13. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

  14. JavaScript 是如何工作的：解析、抽象语法树（AST）+ 提升编译速度5个技巧

  15. JavaScript是如何工作的：深入类和继承内部原理+Babel和 TypeScript 之间转换

  16. JavaScript是如何工作的:存储引擎+如何选择合适的存储API

  17. JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件

  18. JavaScript 是如何工作的:WebRTC 和对等网络的机制

  19. JavaScript 是如何工作的：编写自己的 Web 开发框架 + React 及其虚拟 DOM 原理

  20. JavaScript 是如何工作的：模块的构建以及对应的打包工具

  21. JavaScript 是如何工作的：JavaScript 的内存模型

  22. JavaScript 是如何工作的：JavaScript 的共享传递和按值传递

  23. JS引擎:它们是如何工作的?从调用堆栈到Promise，需要知道的所有内容

JavaScript 通过动画演示系列

  1. 【动画演示】：变量提升别有一翻风味

  2. 【动画演示】：JS 作用域链不在话下

  3. 【动画演示】：事件循环 形象深动(JavaScript)

  4. 【动画演示】JavaScript 引擎运行原理

JavaScript 口袋书 系列

  1. 【JS 口袋书】第 1 和 2 章：JS简介及基础

  2. 【JS 口袋书】第 3 章：JavaScript 函数

  3. 【JS 口袋书】第 4 章：JS 引擎底层的工作原理

  4. 【JS 口袋书】第 5 章：JS 对象生命周期的秘密

  5. 【JS 口袋书】第 6 章：JS 中的闭包与模块

  6. 【JS 口袋书】第 7 章：JS 中的类型转换与比较

  7. 【JS 口袋书】第 8 章：以更细的角度来看 JS 中的 this

  8. 【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素

  9. 【JS 口袋书】第 10 章：使用异步 JavaScript

  10. 【JS 口袋书】第 11 章：HTML 表单及 localStorage 的使用

TypeScript 口袋书系列

  1. 【TS 演化史 -- 破晓】一步一个脚印带你入门 TS

  2. 【TypeScript 演化史 -- 1】non-nullable 的类型

  3. 【TypeScript 演化史 -- 2】基于控制流的类型分析 和 只读属性

  4. 【TypeScript 演化史 -- 3】标记联合类型 与 never 类型

  5. 【TypeScript 演化史 -- 4】更多的字面量类型 与 内置类型声明

  6. 【TypeScript 演化史 -- 5】将 async/await 编译到 ES3/ES5 (外部帮助库)

  7. 【TypeScript 演化史 -- 6】对象扩展运算符和 rest 运算符及 keyof 和查找类型

  8. 【TypeScript 演化史 -- 7】映射类型和更好的字面量类型推断

  9. 【TypeScript 演化史 -- 8】字面量类型扩展 和 无类型导入

  10. 【TypeScript 演化史 -- 9】object 类型 和 字符串索引签名类型的点属性

  11. TypeScript 演化史 -- 10】更好的空值检查 和 混合类

  12. 【TypeScript 演化史 -- 11】泛型参数默认类型 和 新的 --strict 编译选项

  13. 【TypeScript 演化史 -- 12】ES5/ES3 的生成器和迭代支持及 --checkJS选项下 .js 文件中的错误

前端性能优化 系列

  1. Web 性能优化： 使用 Webpack 分离数据的正确方法

  2. Web 性能优化： 图片优化让网站大小减少 62%

  3. Web 性能优化：缓存 React 事件来提高性能

  4. Web 性能优化：21种优化CSS和加快网站速度的方法

  5. Web 性能优化：理解及使用 JavaScript 缓存

  6. Web 性能优化：Preload,Prefetch的使用及在 Chrome 中的优先级

JavaScript 数据结构 系列

  1. 用 JavaScript 实现链表

JavaScript 其它 系列

  1. 11 种在大多数教程中找不到的JavaScript技巧

  2. JavaScript 的内存模型

  3. 我从来不理解JavaScript闭包，直到有人这样向我解释它

  4. 如何在 JS 循环中正确使用 async 与 await

  5. 搞懂 Javascript中this 指向及继承原理

  6. JavaScript 的简洁之道

  7. JavaScript 原型的深入指南

  8. 如何在JavaScript中访问暂未存在的嵌套对象

  9. 10个流行的JavaScript面试题

  10. 搞懂JavaScript引擎运行原理

  11. 需要知道的JS的日期知识，都在这了

  12. 8个有用的JS技巧

  13. 揭秘变量提升

  14. 如何使用 Set 来提高代码的性能

  15. Array.slice 8种不同用法

  16. 8个问题看你是否真的懂 JS

  17. Proxy 的巧用

  18. JS变量生命周期:为什么 let 没有被提升

  19. JS 中有趣的事实

  20. 任务，微任务、队列和时间表

  21. JS 的5个不良编码习惯，现在就改掉吧

  22. JS 最新数据基本类型:BigInt

  23. 关于css margin，你需要知道的一切

  24. 处理 JS中 undefined 的 7 个技巧

  25. 什么时候不使用箭头函数

  26. Promise 中的三兄弟 .all(), .race(), .allSettled()

  27. JS 中创建自定义排序方法

  28. JS 在获取当前月的最后一天遇到的坑

  29. 5个 JS 解构有趣的用途

  30. JS可选链的好处

  31. JS 前20个常用字符串方法及使用方式

  32. JS中，如何提高展开运算符的性能

  33. JS 如何创建、读取和删除cookie

  34. JS 中几种轻松处理'this'指向方式

  35. 息息相关的 JS 同步，异步和事件轮询

  36. 掌握JS函数中的几种参数形式（函数基础）

  37. 简单易懂的 ES6 Iterators 指南和示例

  38. 20多个小事例带你重温 ES10 新特性

  39. JS 常用的技巧和几个鲜为人知的特性

  40. 我对 JS 中相等和全等操作符转化过程一直很迷惑，直到有了这份算法

  41. JS中轻松遍历对象属性的几种方式

  42. JS中函数式编程基本原理简介

  43. ES新提案：双问号操作符

  44. 如何使用useReducer Hook

  45. JS 如何创建、读取和删除cookie

  46. 深入 JS 对象属性

  47. JS异常函数之-箭头函数

  48. 理清JS中的深拷贝与浅拷贝

  49. 常见的三个 JS 面试题

  50. JS对象的 rest/spread 属性指南

  51. 13 个 JS 数组精简技巧，一起来看看

  52. 重温一下 JS 进阶需要掌握的 13 个概念

  53. 通过 41 个 问答方式快速了解学习 Git

  54. 使用 JS 及 React Hook 时需要注意过时闭包的坑(文中有解决方法)

  55. 14 个拷贝数组的 JS 技巧

  56. 通过事例重温一下常见的 JS 中 15 种数组操作(备忘清单)

  57. JavaScript 中， 5 种增加代码可读性的最佳实践

  58. 使用 JS 来动态操作 css ，你知道几种方法？

  59. 13个需要知道的方法：使用 JavaScript 来操作 DOM

  60. 34 个今年11月最受欢迎的 JavaScript 库

  61. 回到基础：什么是DOM及DOM操作？

  62. 通过编写简易版本的虚拟DOM，来理解虚拟DOM 的原理

  63. JavaScript 中的无穷数(Infinity)

  64. 你需要知道的 JavaScript 类(class)的这些知识

  65. JavaScript中的类型检查有点麻烦

  66. 编写高质量箭头函数的5个最佳做法

  67. 什么是 globalThis，为什么要学会使用它？

  68. 何时使用 Map 来代替普通的 JS 对象

  69. 记好这 24 个 ES6 方法，用来解决实际开发的 JS 问题

  70. JavaScript内部原理：浏览器的内幕

  71. 知道 JavaScript 中的错误对象有哪些类型吗？

  72. 这5个 console.log() 技巧帮你提高工作效率

  73. 这 10 个片段，有助于你理解 ES 中的 Promise

  74. 什么 JS 中的对象字面量很酷

  75. 知道临时死区你才能更好的使用 JS 变量

  76. 你知道 JS 中的模块导入有一个缺点吗？

  77. 26 个 CSS 面试的高频考点助力金三银四

  78. 适合前端开发 和UI 设计的20多个最佳 ICON 库

  79. 这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句

  80. 这三个精巧且很棒 JS 库，值得你亲手试试

Vue 系列

  1. vue 2.6 中 slot 的新用法

  2. 搞懂并学会运用 Vue 中的无状态组件

  3. 20 个新的且值得关注的 Vue 开源项目

  4. Vue 和递归组件

  5. Vue 中 强制组件重新渲染的正确方法

  6. 如何在Vue中动态添加类名

  7. 如何在 Vue 中使用 JSX 以及使用它的原因

  8. Vue 中如何让 input 聚焦？(包含视频讲解)

  9. 如何构建运行良好的Vue组件

  10. 高级 Vue 技巧：控制父类的 slot

  11. Vue 中 render 函数有点意思

  12. Vue 中的 Props 与 Data 细微差别，你知道吗？

  13. 2020年 16 个最有用的 Vue UI库

  14. 一个 Vue 模板可以有多个根节点(Fragments)?

  15. 2020 年，Vue 受欢迎程度是否会超过 React？

  16. 12 种使用 Vue 的最佳做法

  17. 如何修复Vue中的 “this is undefined” 问题

  18. Vue Template 修饰符和简写，让开发效率有所提高

  19. Vue中 props 这些知识点，可以在来复习一下！

  20. 这 10 个技巧让你成为一个更好的 Vue 开发者

  21. 将多个属性传递给 Vue 组件的几种方式

React 造轮子 系列

  1. React 造轮子系列：Icon 组件思路

  2. React造轮系列：对话框组件 - Dialog 思路

  3. React造轮系列：Layout 组件思路

React 系列

  1. React高级组件精讲

  2. React 项目结构和组件命名规范

  3. 你要的 React 面试知识点，都在这了

  4. React 新特性讲解及实例(一)

  5. React 新特性 Hooks 讲解及实例(二)

  6. React 新特性 Hooks 讲解及实例(三)

  7. React 新特性 Hooks 讲解及实例(四)

  8. 快速了解 React Hooks 原理

  9. 4 个 useState Hook 示例

  10. useEffect Hook 是如何工作的

  11. useContext Hook 是如何工作的

  12. React 中获取数据的 3 种方法：哪种最好？

  13. 简单易懂的 React useState() Hook 指南（长文建议收藏）

  14. 如何解决 Render Props 的回调地狱

ReactNative 系列

  1. React Native 常用的 15 个库

  2. 2019年，Flutter 和 React Native 谁主沉浮

  • Web 应用安全性 系列

  1. Web 应用安全性: 浏览器是如何工作的

  2. Web 应用安全性: HTTP简介

  3. Web 应用安全性: 使用这些 HTTP 头保护 Web 应用

  4. 掌握并理解 CORS (跨域资源共享)

前端面试 系列

  1. Javascript 面试的完美指南(开发者视角)

  2. 前端面试：谈谈 JS 垃圾回收机制

  3. Javascript 面试中经常被问到的三个问题！

  4. 不要这样写简历

  5. 35 道咱们必须要清楚的 React 面试题

  6. 10 个常问的 JS 面试题

  7. 通过 20 个棘手的ES6面试问题来提高咱们的 JS 技能

  8. 看完这几道 JavaScript 面试题，让你与考官对答如流（上）

  9. 看完这几道 JavaScript 面试题，让你与考官对答如流（中）

  10. [husky-dot#182 JavaScript 面试题，让你与考官对答如流（下）)

前端技巧 系列

  1. 灵活使用 console 让 js 调试更简单

  2. 13个npm 快速使用开发技巧

  3. Web应用程序如何创建 PDF

4 21 个VSCode 快捷键，让代码更快，更有趣

  1. 21个让React 开发更高效更有趣的工具

  2. 50 个JS 必须懂的面试题为你助力金九银十

  3. 36 个JS 面试题为你助力金九银十(面试必读)

  4. 通过实现25个数组方法来理解及高效使用数组方法(长文,建议收藏)

  5. 27 个提升开发幸福度的 VsCode 插件

10 webpack4 中的 React 全家桶配置指南，实战

  1. 动图演示23个常用 VsCode 快捷键(Window & Mac)

  2. 10个必须知道的Chrome开发工具和技巧

ECMAScript 系列

  1. ECMAScript 2016、2017和2018中所有新特性

  2. 目前可以使用ES10的5个新特性

CSS 系列

  1. 45个值得收藏的 CSS 形状
  2. 前端学习之路之自适应设计(sass语法)
  3. 8个有用的 CSS 技巧:视差图像，sticky footer 等等
  4. 使用 CSS Grid Generator来快速使用及学习 Grid 布局
  5. 如何使用SASS编写可重用的CSS
  6. 能解决 80% 需求的 10个 CSS动画库
  7. web 图像技术：前端引入图片的各种方式及其优缺点

SVG 系列

  1. SVG 入门指南(看完,对SVG结构不在陌生)

UI设计 系列

  1. 创建华丽 UI 的 7条规则 第一部分 (2019年更新)

  2. 创建华丽 UI 的 7条规则  第二部分 (2019年更新)


交流

加我个人微信回复 "加群" 或者关注公众号，并进入公众号 [进群交流] ，添加好友即可。 群里工作日我每天都会以红包的形式来互动交流，朋友圈也会经常分享一些前端视频教程，个个教程都是干货。

微信搜索 [大迁世界] ，第一时间阅读或者扫描下方的二维码。

赞赏码

熬夜不易，觉得有很大帮助的朋友可以赏杯咖啡(不接受学生赞赏)，赏了一定要加我微信跟我说。

项目经验&服务器

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

我和阿里云合作服务器，折扣价比较便宜：89/年，223/3年，比学生9.9每月还便宜，买了搭建个项目，熟悉技术栈比较香（老用户用家人账号买就好了，我用我妈的)推荐买三年的划算点，点击图片购买即可

腾讯云最近在做活动，百款云产品低至 1 折，可以点击本条内容或者链接进行参与

鸣谢

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

About