CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。 有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。…

上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后，很多朋友找我讨论，感叹 CSS 的奇妙。 将下面这个动画的下划线效果，从左进入，右边离开修改为从上方进入，下方离开。 第一眼看到这个效果，我的内心毫无波澜。以为只是简单的一个下划线 hover 效果，经过友人提…

嗯，大概到了这个效果，想到了 CSS 混合模式 mix-blend-mode，寻思着，利用混合模式，是否能让效果更上一层楼或者碰撞出一些其他火花。 然而，给元素加上了一个混合模式之后，神奇的事情发生了，3D 效果消失了。 效果从 CSS 3D 变成了 2D。 这就很蹊跷了，预想…

这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。 因为 MDN 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： 那么，这个属性可以先理解为，元素在发生断行时其样式的表现形式。 这个属性…

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动…

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…