Tricks

记录一些纯 CSS 的小技巧。

实现 3D 的书的翻动效果

实现切角

实现如下图所示的卡片切角效果。 方案有如下三种：

• 切图：实现最简单，适合不规则的情况。
• 边框：利用边框画任意凸几何形的技巧。
• 渐变：利用线性渐变制造 color-stop 的技巧。

实现不规则气泡动效

预览地址

使用自定义变量 （--scale，--translate-left 等）将 transform 属性解耦。

注意点：

transform 属性并非 简写属性 ，不能像背景（background）一样拆分成多个独立的属性。（浏览器支持中）。

如果想要每次变化的值是随机数，可以添加一个 raf 的定时器，将 offset 作为变量，每次绘制时随机产生，只要保持关键帧归位即可。