CSS3复杂动画效果
电子简历里的「项目经验」卡片，常用一层裁切容器加一层可放大的背景图，再叠标题、说明和图标。 下面这组 CSS3 用 transform、transition 和半透明遮罩，做出鼠标移入后图片放大、文字从中心散开的效果。站点示例文案仍是「雨果学院 / 技术-HTML5-CSS3」。 结构很薄：最外 .…
电子简历里的「项目经验」卡片，常用一层裁切容器加一层可放大的背景图，再叠标题、说明和图标。 下面这组 CSS3 用 transform、transition 和半透明遮罩，做出鼠标移入后图片放大、文字从中心散开的效果。站点示例文案仍是「雨果学院 / 技术-HTML5-CSS3」。 结构很薄：最外 .…
CSS Grid 是二维布局：父容器 17 个属性、子元素 10 个，加上取值方式，一共 27 项。把它拆成「布局之道 / 构建之法 / 取值之术」更好记。 构建套路是父容器三步（定框架、设间隔、找对齐）加子元素两步（摆位置、找对齐），也就是「32 构建之法」。原文 23 张图和示例代码全部保留。 …
英文 | https://medium.com/better-programming/10-best-practices-for-improving-your-css-84c69aac66e。CSS 看起来很难写错：加几条规则就能改外观。小站点几个文件确实如此；大应用里样式会迅速失控。如何让它可管理…
这是一份移动优先的 前端组件库 清单：从自动化工作流、框架、游戏引擎、UI 组件，到表单、图表、滚动、编辑器和实用工具。 每个库的名字和原链接都保留，方便按需查找。文末有来源地址。 类别 代表 工作流 Yeoman / gulp / grunt / FIS，Bower / RequireJS / S…
这是一个下午写完的纯 JS 中国象棋：用 HTML5 Canvas 画棋盘、棋子和选中动画，主要走子逻辑都在一份脚本里。 棋盘是 10 行 9 列共 90 个坐标；棋子带颜色、走法（马走日、相走田）、选中态和当前坐标。完整代码和效果图都保留。 部分 做什么 棋盘 10 行 9 列、90 个点、点击定…
每个前端开发者都体验过：同一段按钮、同一套布局，要在多个页面里反复写。组件一旦改需求，返工往往从整页铺开。开发者真正想要的是把复杂界面拆成可复用零件，而 React 就是为此而生的 JavaScript 库。 React 由 Facebook 推出，用来构建交互式用户界面。它快、灵活，社区也足够大。…
