ABEI’S DESK.
ABEICONNECTING PEOPLE & IDEAS
ABEI/OS — TERMINAL● LOCAL
~/play / 实验
abei@desk:~ ./playground

实验终端

5 EXPERIMENTS

小程序、交互试验,还有一些纯粹出于好奇的代码。

// 实验笔记

inline-flex 可能会造成元素下方出现空白?

inline-flex 元素会按照文本基线对齐,浏览器会为其保留降部字形(如 g、p)的空间,即使没有文字也会显示这个空白区域。使用 vertical-align: middle 可以解决这个问题。

Checkbox

[source]

Blur Image Card

[source]

AI Flower

1 hour ago

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam laborum autem nobis maxime labore.

Matrix Rain

[source]

可拖动卡片

[source]

// 实验笔记

如何实现卡片拖动动画效果?

使用鼠标事件监听卡片拖动,当拖动距离超过阈值时移除卡片并添加新卡片。通过HSL颜色模型生成和谐的背景色和阴影,确保视觉效果一致。

play / UTF-8[ ESC ] 返回桌面
桌面
⌂
3310 · PERSONAL EDITION