:has伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求的事情，很多以前只能更改 dom 结构 或者只能用 JS 才能实现的功能现在也能纯 CSS 实现了。

Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 使开发人员可以直接访问CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现。

整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对渐变（Gradient）的究极利用。

文案来回在指定区域内水平滚动，并且在头尾处停留一段时间。

最近有个需求，要给系统做个主题切换功能，网上关于主题的方案挺多，准备做一些调研，因为项目是react+antd的一个后台系统，开始从antd官方文档中开始着手，做下整理对比，最后选一个最佳的方案用于实践。

在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。

只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现。

鼠标在画布上移动的时候，吸铁石们会被吸引，旋转。使用 Canvas 实现这个效果并不难。恰好最近看了一点 Houdini 的文档。

看十遍文档不如写一篇文章掌握来得快，所以这篇文章，将使用 Houdini 的 Paint API 来复刻这个磁吸效果。

I spoke about CSS layout at CSS Day conference recently, and in the Q&A session afterwards I was asked about masonry layout in CSS. Masonry layout, in case you’re not aware, is where different height items are laid out in columns but, rather than being aligned on the row axis, the items below effectively move up to plug any gaps, kind of like a bricklayer — hence the name. Pinterest’s grid design is a commonly-cited example whenever the masonry conversation comes up.

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。

当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素，这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势。

当然，如果仅仅是从效果的角度而言，使用 CSS 构建的粒子动画一样可以做到非常的令人震撼。

本文，将尝试利用 CSS 来构建粒子动画。

JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。

透视背景还可以叠加花样？

A look at some interesting use-cases for CSS flexbox and grid in Figma app.

CSS Grid is a new way to create two-dimensional layouts on the web. With just a few lines of CSS, you can create a grid that was hardly possible before without JavaScript. No plugin or complicated installs, no heavy additional files, no more design limitations due to 12-columns only.

Wow？CSS 也能完成如此酷炫的转场动画了？

在这篇笔记中，主要总结了流与宽高之间是如何相互影响的，同时还探索了部分盒模型的问题。希望能给大家在平常开发时，带来一定的启发。

Create a rating component with svg stars that support fractional values.