ota裤
获得徽章 1
#青训营笔记创作活动#
1月16日 打卡day3
今日学习
css实现文字的背景效果：
background-clip:text + color:transparent
实现背景的滚动：
先用linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent)制作渐变背景，包含了隐藏到显现再到隐藏。
再利用过渡或动画移动背景，达到文字渐变色彩
1月16日 打卡day3
今日学习
css实现文字的背景效果：
background-clip:text + color:transparent
实现背景的滚动：
先用linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent)制作渐变背景，包含了隐藏到显现再到隐藏。
再利用过渡或动画移动背景，达到文字渐变色彩
展开
评论
点赞
#青训营笔记创作活动#
1月15日 day2
今日学习
1.monorepo 概念：把多个项目放在一个仓库里
├── packages
| ├── pkg1
| | ├── package.json
| ├── pkg2
| | ├── package.json
├── package.json
2.原有的multirepo痛点在于，多个项目之间如果有公共的npm包，想要改动npm包内容
要让每一个仓库里的代码升级npm包
由于在 MultiRepo 当中，各个项目的工作流是割裂的，因此每个项目需要单独配置开发环境、
配置 CI 流程、配置部署发布流程等等，甚至每个项目都有自己单独的一套脚手架工具。
如果是 10 个项目，就需要维护 10 份基建的流程，很大部分都是重复的
3.monorepo的收益在于工作流的一致性，依赖代码改变，所有项目的代码改变；
项目基建成本降低，可以直接复用现有的基建流程；
团队协作更容易，在同一个仓库能方便地构建代码，复用代码，检索源码，commit也只需要一次
4.monorepo方案lerna/（比较底层的方案比如 lerna，封装了 Monorepo 中的依赖安装、脚本批量执行等等基本的功能
，但没有一套构建、测试、部署的工具链，
整体 Monorepo 功能比较弱，但要用到业务项目当中，往往需要基于它进行顶层能力的封装，提供全面工程能力的支撑
nx/rushstack(比较集成，工具链成熟，不适合定制)
1月15日 day2
今日学习
1.monorepo 概念：把多个项目放在一个仓库里
├── packages
| ├── pkg1
| | ├── package.json
| ├── pkg2
| | ├── package.json
├── package.json
2.原有的multirepo痛点在于，多个项目之间如果有公共的npm包，想要改动npm包内容
要让每一个仓库里的代码升级npm包
由于在 MultiRepo 当中，各个项目的工作流是割裂的，因此每个项目需要单独配置开发环境、
配置 CI 流程、配置部署发布流程等等，甚至每个项目都有自己单独的一套脚手架工具。
如果是 10 个项目，就需要维护 10 份基建的流程，很大部分都是重复的
3.monorepo的收益在于工作流的一致性，依赖代码改变，所有项目的代码改变；
项目基建成本降低，可以直接复用现有的基建流程；
团队协作更容易，在同一个仓库能方便地构建代码，复用代码，检索源码，commit也只需要一次
4.monorepo方案lerna/（比较底层的方案比如 lerna，封装了 Monorepo 中的依赖安装、脚本批量执行等等基本的功能
，但没有一套构建、测试、部署的工具链，
整体 Monorepo 功能比较弱，但要用到业务项目当中，往往需要基于它进行顶层能力的封装，提供全面工程能力的支撑
nx/rushstack(比较集成，工具链成熟，不适合定制)
展开
评论
点赞
#青训营笔记创作活动#
1月14日 打卡day1
今日学习
几个关键功能的实现要点：
1. 鼠标产生抓握效果，通过active和hover伪类更改cursor属性值为grab或grabbing
2.监听抓取元素事件，将原来的元素设置为隐藏，创建一个绝对定位的克隆元素，加入到父元素下，用一个变量标记开始拖动
3.通过维持元素left和鼠标clientX之差为鼠标刚开始拖动时在克隆元素上的offsetX，保证鼠标与元素相对位置不变
4.松开时，克隆元素位置立即调为原位，设置过渡更自然
5. 计算鼠标拖动距离，并相应用transform scale改变图片大小，注意元素要设置transform-origin: top left改变缩放原点到左上角，否则鼠标和克隆元素相对位置会发生偏移
5.优化，左边图片加载完，再将拖拽元素的src改成原图，浏览器会自动复用 防止边移动边加载（利用Image）
1月14日 打卡day1
今日学习
几个关键功能的实现要点：
1. 鼠标产生抓握效果，通过active和hover伪类更改cursor属性值为grab或grabbing
2.监听抓取元素事件，将原来的元素设置为隐藏，创建一个绝对定位的克隆元素，加入到父元素下，用一个变量标记开始拖动
3.通过维持元素left和鼠标clientX之差为鼠标刚开始拖动时在克隆元素上的offsetX，保证鼠标与元素相对位置不变
4.松开时，克隆元素位置立即调为原位，设置过渡更自然
5. 计算鼠标拖动距离，并相应用transform scale改变图片大小，注意元素要设置transform-origin: top left改变缩放原点到左上角，否则鼠标和克隆元素相对位置会发生偏移
5.优化，左边图片加载完，再将拖拽元素的src改成原图，浏览器会自动复用 防止边移动边加载（利用Image）
展开
评论
点赞
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章