前段时间，组里决定做一个跨项目、跨业务的 UI 组件库，原因是我们部门的产品越来越多，且每个产品设计到多端（如 Web/Mobile/PC/Android 等）而为了快速响应目标，决定做一套统一且可视化的，拥有部门特色的 UI 组件库。 视觉已经给出了所有组件样式、交互效果，而…

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？ 本文将从移动端适配的基础…

移动端适配的问题，一般来说我们都不会去深究，因为这种东西都是配置一次就再也不用管的了，接到设计图就按照祖传套路撸就完事了。按部就班的必定只能成为活动页写手，研究透彻以后，才能成为一名专业的活动页写手嘛。 文章开始，我们需要来捋清楚像素、视口以及缩放之间种种藕断丝连的关系，来抽丝…

grid 布局是W3C提出的一个二维布局系统，通过 display: grid 来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 grid 布局进行一个简单的了解。目前，grid 仅仅只有 Edge使用前缀能够支持，为了更好地体验，可以使用 C…

BFC(块格式化上下文): 是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。 简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。 可见两个块元素外边距为20px。 我…

学习之前可以先看看酷炫的动画效果，想想怎么实现。 从最近在做的需求说起，一个优惠券样式，过设计稿的时候认为没什么大不了的，满口答应了。真正开始开发的时候遇到问题，主要是镂空效果实现方式上比较费劲。要求是背景可配，并且票身可以配背景图，然后镂空是真镂空。 设想并尝试了很多种方案，…

“我和我的祖国一刻也不能分割，无论我走到哪里都流出一首赞歌。” 相信大家最近已经被 《我和我的祖国》 这首歌给刷屏了，鱼头每次在听到这首歌的时候，总会感慨万千，我们伟大的新中国，这70年真的经历了太多太多了。 但是就是在一代又一代的人不懈的努力下，如今的中国，已经成为了各个国家…

<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。 没想到，这些选择器居然跟 input ...…