获得徽章 2
#青训营笔记创作活动#
2月13日 打卡Day47
这篇文章通过纯CSS实现了一个有趣的探照灯样式404页面，绘制了包括灯杆、灯罩、灯泡、光束，还实现了文字渐隐效果，其中使用到了animation-timing-function等CSS动画特性，值得学习！
2月13日 打卡Day47
这篇文章通过纯CSS实现了一个有趣的探照灯样式404页面，绘制了包括灯杆、灯罩、灯泡、光束，还实现了文字渐隐效果，其中使用到了animation-timing-function等CSS动画特性，值得学习！
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
2月12日 打卡Day46
这篇文章介绍了利用CSS3的动画特性实现的若干种动画效果，包括：淡入-从上效果、淡入-从右效果、淡入-从下效果、淡入-从左效果、淡出效果、淡出-向上效果、淡出-向右效果、淡出-向下效果、淡出-向左效果、弹跳效果、弹入效果、弹入-从上效果、弹入-从右效果、弹入-从下效果、弹入-从左效果、弹出效果、弹出-向上效果、弹出-向右效果、弹出-向下效果、弹出-向左效果、转入效果、转入-从左上效果、转入-从左下效果、转入-从右上效果、转入-从右下效果、转出效果、转出-向左上效果、转出-向左下效果、转出-向右上效果、转出-向右下效果、翻转效果、翻入-X轴效果、翻入-Y轴效果、翻出-X轴效果、翻出-Y轴效果、闪烁效果、震颤效果、摇摆效果、摇晃效果、震铃效果。
2月12日 打卡Day46
这篇文章介绍了利用CSS3的动画特性实现的若干种动画效果，包括：淡入-从上效果、淡入-从右效果、淡入-从下效果、淡入-从左效果、淡出效果、淡出-向上效果、淡出-向右效果、淡出-向下效果、淡出-向左效果、弹跳效果、弹入效果、弹入-从上效果、弹入-从右效果、弹入-从下效果、弹入-从左效果、弹出效果、弹出-向上效果、弹出-向右效果、弹出-向下效果、弹出-向左效果、转入效果、转入-从左上效果、转入-从左下效果、转入-从右上效果、转入-从右下效果、转出效果、转出-向左上效果、转出-向左下效果、转出-向右上效果、转出-向右下效果、翻转效果、翻入-X轴效果、翻入-Y轴效果、翻出-X轴效果、翻出-Y轴效果、闪烁效果、震颤效果、摇摆效果、摇晃效果、震铃效果。
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡Day45
规范的TS注释不仅能说明代码意图、直接生成API文档，还能为IDE工具提供更智能的提示。本文从TSDoc规范出发，利用API提取器、文档生成器等工具实现了文档生成，还提到可以采用TypeDoc工具一键实现这些功能。
2月11日 打卡Day45
规范的TS注释不仅能说明代码意图、直接生成API文档，还能为IDE工具提供更智能的提示。本文从TSDoc规范出发，利用API提取器、文档生成器等工具实现了文档生成，还提到可以采用TypeDoc工具一键实现这些功能。
展开
评论
点赞
#青训营笔记创作活动#
2月10日 打卡Day44
这篇文章从Git 工作流程出发，介绍20个常用命令：clone、init、remote、checkout、branch、tag、add、commit、push、pull、fetch、cherry-pick、merge、rebase、reset、revert、stash、reflog、rm、log。不过，还是需要在实践中不断使用才能记得住，不然很快就会忘掉~
2月10日 打卡Day44
这篇文章从Git 工作流程出发，介绍20个常用命令：clone、init、remote、checkout、branch、tag、add、commit、push、pull、fetch、cherry-pick、merge、rebase、reset、revert、stash、reflog、rm、log。不过，还是需要在实践中不断使用才能记得住，不然很快就会忘掉~
展开
评论
点赞
#青训营笔记创作活动#
2月9日 打卡Day43
这篇文章介绍几个可用CSS/HTML5特性取代JS的场景：颜色选择器、打字效果、滑顶/触底效果、顺滑切图。利用原生特性实现这些效果是可以提高性能，也降低了JS代码的复杂度。
2月9日 打卡Day43
这篇文章介绍几个可用CSS/HTML5特性取代JS的场景：颜色选择器、打字效果、滑顶/触底效果、顺滑切图。利用原生特性实现这些效果是可以提高性能，也降低了JS代码的复杂度。
评论
点赞
#青训营笔记创作活动#
2月8日 打卡Day42
这篇文章介绍了如何从零实现一个“几何画板”（包括元素创建、编辑、拖拽、图层管理、撤销和重做、导入导出等功能），利用几何和代数学知识解决前端问题。实现采用vue+vite+less方案。
2月8日 打卡Day42
这篇文章介绍了如何从零实现一个“几何画板”（包括元素创建、编辑、拖拽、图层管理、撤销和重做、导入导出等功能），利用几何和代数学知识解决前端问题。实现采用vue+vite+less方案。
评论
点赞
#青训营笔记创作活动#
2月7日 打卡Day41
又是一篇复刻《羊了个羊》的纯原生JS实现方案，但是这一篇把设计思路交代得更为清楚一些，最终效果也更为流畅一些，作者还画了很多示意图，是挺不错的参考实现！
2月7日 打卡Day41
又是一篇复刻《羊了个羊》的纯原生JS实现方案，但是这一篇把设计思路交代得更为清楚一些，最终效果也更为流畅一些，作者还画了很多示意图，是挺不错的参考实现！
评论
点赞
#青训营笔记创作活动#
2月6日 打卡Day40
水波交互动画（包括了水体扭曲和点击水波扩散的效果），主要利用了pixi.js库以及关于它的filters滤镜的使用。非常有趣的效果，但是感觉太耗费性能了……
2月6日 打卡Day40
水波交互动画（包括了水体扭曲和点击水波扩散的效果），主要利用了pixi.js库以及关于它的filters滤镜的使用。非常有趣的效果，但是感觉太耗费性能了……
评论
点赞
#青训营笔记创作活动#
2月5日 打卡Day39
苹果官网灵动岛介绍动画：随着页面的向下滚动，整个文字从无到出现，再经历一轮渐变色的变化，最后再逐渐消失。
文字渐变实现方法：
①使用 background-clip 实现：background-clip:text + color: transparent
②使用 mix-blend-mode 实现：
效果随滚动展示：利用 gsap.timeline 结合滚动容器，触发动画
2月5日 打卡Day39
苹果官网灵动岛介绍动画：随着页面的向下滚动，整个文字从无到出现，再经历一轮渐变色的变化，最后再逐渐消失。
文字渐变实现方法：
①使用 background-clip 实现：background-clip:text + color: transparent
②使用 mix-blend-mode 实现：
效果随滚动展示：利用 gsap.timeline 结合滚动容器，触发动画
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡Day38
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。随着 Hooks 开始改变开发人员编写 React 组件的方式，需要编写一套 React Hooks 的最佳实践，本文分享的技巧许多技巧可以帮助大家在项目中以正确的方式编写 React Hooks。
2月4日 打卡Day38
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。随着 Hooks 开始改变开发人员编写 React 组件的方式，需要编写一套 React Hooks 的最佳实践，本文分享的技巧许多技巧可以帮助大家在项目中以正确的方式编写 React Hooks。
展开
评论
点赞
#青训营笔记创作活动#
2月3日 打卡Day37
实现图片预览/查看的关键点在于用 CSS3 中的 transform 变换来实现2D或3D上的旋转，缩放，移动，倾斜等等变换。可以通过指针事件来进行多端统一的事件监听。PC段鼠标移动事件对应 mousemove，移动端对应 touchmove。
2月3日 打卡Day37
实现图片预览/查看的关键点在于用 CSS3 中的 transform 变换来实现2D或3D上的旋转，缩放，移动，倾斜等等变换。可以通过指针事件来进行多端统一的事件监听。PC段鼠标移动事件对应 mousemove，移动端对应 touchmove。
展开
评论
点赞