- 博客(12)
- 收藏
- 关注
RSS订阅原创 卡片晃动动效（工作笔记十二）
摘要：这段代码实现了一个卡片3D旋转效果，当鼠标移入图片时，卡片会跟随鼠标位置产生3D晃动。核心原理是通过JavaScript监听mousemove事件，计算鼠标在卡片上的相对位置，转换为X/Y轴的旋转角度(-5°到5°范围)，并通过CSS的transform属性应用perspective和rotateX/Y变换。鼠标移出时恢复初始状态。代码简洁高效，仅需HTML/CSS/JavaScript即可实现这一交互效果。
2025-12-29 09:43:10
55
原创 线性渐变背景实现重点文字高亮（工作笔记十一）
摘要：本文介绍使用CSS线性渐变替代定位实现文字高亮效果的方法。通过设置background属性为linear-gradient，将透明色与半透明红色渐变结合，解决了定位实现时文字换行后高亮背景消失的问题。代码示例展示在300px宽度的段落中，关键文字在多行情况下仍能保持50%-90%区间的高亮效果，确保换行后高亮显示正常。这种方法简单有效，适用于需要突出显示多行文本的场景。
2025-12-29 09:41:50
150
原创 CSS中百分比计算规则（工作笔记十）
CSS百分比值计算规则：1.宽度/水平属性（width/padding/margin）相对于父元素宽度；2.定位属性（top/bottom相对父元素高度，left/right相对宽度）；3.transform:translate()相对自身尺寸。特殊场景：font-size相对父元素字体大小，border-radius相对自身宽高。使用建议：父元素需明确尺寸，用开发者工具验证计算值。
2025-12-25 09:01:24
228
原创 发光按钮动效（工作笔记九）
摘要：本文展示了一个HTML/CSS实现的发光按钮效果。当鼠标悬停在按钮上时，按钮会通过CSS伪元素(:before和:after)产生发光效果。:before伪元素创建外部发光阴影，:after伪元素添加内发光效果，两者初始透明度为0，在hover状态时变为1，通过transition实现平滑过渡。按钮采用圆角设计，居中显示在页面中。代码简洁，仅需HTML结构和CSS样式即可实现交互式发光效果。
2025-12-24 11:56:03
108
原创 滚动进入动画（工作笔记八）
这段代码实现了一个滚动动画效果：当页面向下滚动时，带有"data-animate"属性的元素会从下方20px处淡入滑出。通过CSS定义了一个fadeUp动画（0.8秒内从透明变为不透明，同时从Y轴20px位置移动到原位），并使用IntersectionObserver API在元素进入视口10%时触发动画，动画只执行一次。这是一个简洁的滚动触发动画实现方案。
2025-12-24 11:18:14
204
原创 DOM元素的宽高、位置属性（工作笔记七）
本文对比了DOM元素的两个系列属性：1) 宽度/高度属性：clientWidth表示元素可视区域宽度，scrollWidth则包含隐藏内容的实际总宽度；2) 位置属性。这些属性在计算元素尺寸和位置时具有不同应用场景。
2025-11-28 17:16:10
136
原创 css背景（工作笔记六）
CSS背景属性详解：从基础到高级技巧 本文全面介绍了CSS背景属性的使用方法和实用技巧。包含几个核心属性：background-image（支持多图叠加）、background-repeat（控制平铺方式）、background-position（定位图片）、background-size（调整尺寸）、background-attachment（控制滚动）、background-clip（绘制区域）和background-origin（定位基准）。文章还展示了简写属性background的推荐用法顺序。
2025-10-15 08:45:20
233
原创 自定义滚动条样式（工作笔记五）
本文介绍了如何使用CSS自定义网页滚动条样式。通过::-webkit-scrollbar伪元素选择器，可以修改滚动条的宽度、滑轨背景色（红色）、滑块颜色（灰色）及悬停效果（蓝色变）。示例代码展示了一个100×200px的粉色容器，内含超出高度的文本，应用自定义滚动条样式后，滑块呈圆角灰色，悬停变蓝。这种修饰方法仅适用于WebKit内核浏览器（如Chrome/Safari）。
2025-08-20 13:09:29
321
原创 扫光动效按钮（工作笔记四）
本文介绍如何实现按钮扫光动效：当鼠标移入时，一道光从按钮划过；移出时反向划回。通过CSS伪元素::after创建扫光层，使用linear-gradient设置半透明白色渐变背景，通过transform实现60度斜向位移。关键步骤包括：1)设置初始和结束位置；2)添加2秒缓动过渡；3)使用pointer-events:none避免干扰hover事件。最终效果呈现流畅的斜向扫光动画，增强了按钮的视觉反馈。
2025-08-17 22:49:42
627
原创 CSS3使用技巧之渐变（工作笔记三）
CSS渐变效果详解：包括线性渐变(linear-gradient)和径向渐变(radial-gradient)的语法与参数设置。线性渐变通过指定方向(默认从上到下)和颜色创建平滑过渡，支持角度、位置控制和重复渐变。径向渐变通过形状、大小和位置参数创建圆形/椭圆形渐变。文中提供了三个实用案例：渐变边框、文字颜色渐变和动态文字渐变效果，展示了CSS渐变在网页设计中的实际应用。通过background-clip:text等属性可实现文字渐变特效，结合动画可创建动态渐变效果。
2025-08-13 13:33:38
1041
原创 vue3 + ts + vite + pinia + element-plus 项目搭建及报红问题解决（工作笔记二）
摘要：本文详细介绍了如何使用Vite搭建Vue3+TypeScript项目并配置常用插件。内容包括：1)项目初始化及依赖安装；2)vite.config.ts和tsconfig配置；3)集成vue-router路由管理；4)安装Less/Sass预处理器；5)配置Pinia状态管理；6)Element Plus按需自动导入；7)Axios请求封装及接口调用。同时提供了后端Express服务搭建示例，并演示了前后端联调过程。文中还给出了常见报错解决方案，如@types/node安装和VSCode重启修复问题。
2025-07-28 13:13:06
1945
原创 Git实用技巧（工作笔记一）
本文总结了Git使用中的常见问题及实用技巧，包括：1）临时保存修改（git stash）；2）本地与远程分支关联方法；3）修改提交信息（git commit --amend）；4）撤销工作区/暂存区修改；5）版本回退（reset/revert）。同时整理了基础命令：配置、本地库操作（init/add/commit/log）、分支管理、标签管理、差异比较和远程仓库操作。最后介绍了VSCode中的Git集成功能，包括仓库克隆、分支管理及推荐插件。全文覆盖Git日常开发中的核心操作场景，提供简明实用的解决方案。
2025-07-24 13:03:41
1836
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人