abei@desk:~ ./playground
实验终端
小程序、交互试验,还有一些纯粹出于好奇的代码。
// 实验笔记
inline-flex 可能会造成元素下方出现空白?
inline-flex 元素会按照文本基线对齐,浏览器会为其保留降部字形(如 g、p)的空间,即使没有文字也会显示这个空白区域。使用 vertical-align: middle 可以解决这个问题。
Checkbox
[source]Blur Image Card
[source]AI Flower
1 hour agoLorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam laborum autem nobis maxime labore.
Matrix Rain
[source]可拖动卡片
[source]// 实验笔记
如何实现卡片拖动动画效果?
使用鼠标事件监听卡片拖动,当拖动距离超过阈值时移除卡片并添加新卡片。通过HSL颜色模型生成和谐的背景色和阴影,确保视觉效果一致。