Abei

Demo

The playground for me, find some interesting demos here.

Sprite Animation

code

问题说明

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

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

Checkbox

code

Blur Image Card

code

AI Flower

1 hour ago

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

Matrix Rain

code

可拖动卡片

code

问题说明

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

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

Back to Home