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

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

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

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

方法一:max-height 模拟法 核心原理: 用固定的超大 max-height 替代 height: auto,配合 height: 0 + overflow: hidden 实现动画。 收起状态:height: 0; max-hei...