前端开发

在很多场景下，Tab 的“选中态”如果只靠文字变粗或颜色变化，给用户的反馈会比较弱，交互性一般。如果有一块会跟随选项移动的背景滑块，就可以显著提升可感知的交互质量，看起来更丝滑更爽。   所谓 Tab 背景切换“丝滑移动”，直觉上...

赞(0)dong2026-02-17阅读(21)评论(1)

我在写vue3App首页导航组件时，需要用到嵌套路由，跟基础的路由类似，用处在于实现组件内局部视图的无刷新更新，想了想还有一些使用场景例如后台管理系统侧边栏、多模块组件内的分栏等等，故在学习总结后记录下一些用法还有注意事项以备忘。 首先是基...

赞(0)dong2026-02-11阅读(26)去评论

记得刚学前端时，不会调整img标签引入图片的比例，看着图片被拉伸，以及布局错乱，影响视觉一致性很丑。一开始想着用ps调整好图片的宽高和比例再引入但是这样也太麻烦了，在某些场合例如用户上传头像的场景下，必须保证图片比例正确。所以呢我总结了一下...

赞(0)dong2026-02-07阅读(39)评论(1)

平时找网站模仿练习前端时，我发现有些网站的首屏下拉有内容层的滚动覆盖的交互效果，给人一种全屏视觉的沉浸感，配合滚动触发的顺滑过渡和内容层自然衔接，看起来就很爽，于是我就研究了一下怎么实现的，其实简单的css和js就可以实现。 首先肯定要给首...

赞(0)dong2026-02-07阅读(28)去评论

在 Vue 3(组合式API)项目中使用 Prism可以采取在线CDN引入的方式，我这里选择用npm安装，在项目根目录执行安装命令npm install prismjs即可。 接着在src/component/目录下创建一个组件，示例如下：...

赞(0)dong2026-02-06阅读(26)去评论

想做流星动画加一点动态氛围感，不想引入臃肿的 JS 库，也不想用现成的动效插件，用纯 CSS也能实现流星不断划过夜空的背景动画。核心是CSS 的animation关键帧、伪元素和基础定位，零 JS 依赖、轻量流畅，还能根据页面风格灵活调整流...

赞(1)dong2026-02-04阅读(29)去评论

在 Vue3 开发封装按钮组件时，把主色、圆角、内边距直接写在模板和逻辑里；封装卡片时，宽高、阴影、间距随手写死；封装弹窗时，默认宽高、关闭方式各处不一致。某天要改按钮默认大小，或全项目卡片统一加圆角，就得全局翻找组件代码一个个改； 解决思...

赞(0)dong2026-01-31阅读(28)去评论

写 CSS 中会碰到一个问题，有一些的 “魔法数值” 很烦，每次都要回忆或者查找上次写的数值是多少。比如主色调 #4285F4 写遍所有文件，某天假如要换个主色，得全局搜色值一个个改；按钮圆角一会儿 8px 一会儿 12px，卡片间距没个统...

赞(1)dong2026-01-30阅读(35)去评论

做前端时发现很多时候页面的 “普通感”，并不是因为少了多炫酷的特效，反而就是缺了些细节上的打磨。不用折腾 JS，不用找复杂的插件，纯 CSS 就能实现的几个小效果，页面的视觉和交互感就能提一大截。 我自己最常用的就是渐变文字、毛玻璃效果和卡...

赞(0)dong2026-01-28阅读(26)去评论

前端开发中，给页面背景加鼠标跟随效果能大幅提升交互质感，不管是单张背景图的轻量跟随，还是行星、星空这类多元素的分层视差跟随，核心都是通过 JS 计算鼠标偏移量，配合 CSS 的 transform 实现元素位移，下面分两种实用方法讲解，适配...

赞(1)dong2026-01-28阅读(34)去评论