前端动画必知必会：React 和 Vue 都在用的 FLIP 思想实战。
Vue 官网过渡动画里有一段很炫的效果。乍一看手写逻辑会很复杂，文档里出现了 FLIP。顺着这条线能在 Aerotwist 的 flip-your-animations 上找到思路，再一步步做出类似效果。图片素材引自知乎《有个漂亮女朋友是种怎样的体验？》，侵删。 本文最终效果： 预览：http://…
Vue 官网过渡动画里有一段很炫的效果。乍一看手写逻辑会很复杂，文档里出现了 FLIP。顺着这条线能在 Aerotwist 的 flip-your-animations 上找到思路，再一步步做出类似效果。图片素材引自知乎《有个漂亮女朋友是种怎样的体验？》，侵删。 本文最终效果： 预览：http://…
电子简历里的「项目经验」卡片，常用一层裁切容器加一层可放大的背景图，再叠标题、说明和图标。 下面这组 CSS3 用 transform、transition 和半透明遮罩，做出鼠标移入后图片放大、文字从中心散开的效果。站点示例文案仍是「雨果学院 / 技术-HTML5-CSS3」。 结构很薄：最外 .…
CSS Grid 是二维布局：父容器 17 个属性、子元素 10 个，加上取值方式，一共 27 项。把它拆成「布局之道 / 构建之法 / 取值之术」更好记。 构建套路是父容器三步（定框架、设间隔、找对齐）加子元素两步（摆位置、找对齐），也就是「32 构建之法」。原文 23 张图和示例代码全部保留。 …
当微软宣布 Edge 将支持 CSS 变量时，这项能力在主要浏览器里已经齐了。原生 CSS 从此可以声明可复用的自定义属性，再用 var() 读出来。变量名用两根连词线 --，因为 $foo 被 Sass 占用，@foo 被 Less 占用。 CSS 变量又叫 CSS 自定义属性（CSS custo…
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定 2020 年 4 月 4 日举行全国性哀悼活动。期间全国和驻外使领馆下半旗致哀，停止公共娱乐活动；4 月 4 日 10 点起默哀 3 分钟，汽车、火车、舰船鸣笛，防空警报鸣响。 默哀日访问网站时，整站常常变成全灰。若临…
把平时最常用的 55 个 CSS 片段 收成一份速查：清浮动、居中、省略号、loading、小三角，一直到阴影和圆角。来源：https://segmentfault.com/a/1190000022019129 。 每个片段保留完整声明（含当时的浏览器前缀）。需要时按标题跳转即可，不必整页背下来。 …
