状态流转
HTML中实现外卖餐品订单状态追踪小组件这是一款通过CSS实现的外卖订单状态流转指示小部件，仿照了美国外卖平台DoorDash的一款iOS小部件设计，用于实时跟踪食物订单的状态。该组件可应用于电商物流状态追踪、外卖订单状态追踪以及其他...
乐高加载器
CSS实现的乐高积木拼接示意动画效果预加载器利用CSS结合SVG矢量图实现的一款以乐高积木拼接动画效果为主题的预加载器，它模拟了乐高积木组装的过程，强调了构建的乐趣。在加载过程中，用户可以看到乐高积木在循环拼接与拆除的动画效果，这不仅消除...
卡通星星
SVG 可爱的彩色卡通星星⭐️背景，每次刷新都会变换星星布局！基于SVG矢量图实现的无数彩色卡通星星组成背景效果，特别的卡哇伊，部分星星之间由细线连接在一起。每次刷新都会在随机的位置生成大小不一、黄色和白色小星星。由于完全基于SVG矢量图实现所以特别的轻量级！
充电电池
CSS创意电池充电中效果，高颜值的电量加载过程动画当前代码段基于CSS创建了一个电池充电动画效果，中间由「电池+闪电」图标组成一个正处在充电状态的动画，周边是一个圆形的加载环，图标均是由SVG实现的，闪电以及加载动画是基于CSS实现的。并且实现...
滚动指示
CSS创意闹钟效果鼠标滚动指示器小组件该代码片段创建了一个由鼠标滚动驱动的小闹钟动画计时器，其中小闹钟图标是通过SVG矢量图创建的，底层完全使用CSS实现滚动计数和指针滑动效果。小闹钟下方的进度百分比会根据滚动位置更新，闹钟的指针以...
花式洗牌
GSAP花式洗扑克牌卡片动画效果使用GSAP实现的炫酷洗牌动画效果，卡片是由SVG生成的，卡片的基本布局是通过CSS实现的，事先在HTML页面中定义一个ui列表，其中每一个卡片对应一个li元素，然后通过GSAP的timelin...
死神镰刀
SVG 结合 CSS 创建背着镰刀带着斗篷的死神形象，支持「震惊」等4种动画效果创建了一个具有「大笑」、「震惊」、「晃动」、「跳舞」四种动画效果的死神（Grim Reaper）图标。使用SVG结合CSS动画，使背着镰刀穿着斗篷的死神慢悠悠的上下晃动起来，营造出一种神秘和恐...
爱心舞动
CSS红色小心心围在一起跳舞动画效果创建一个“跳舞的心形圈”效果。使用CSS的@keyframes规则和animation属性来定义和应用各种动画效果，包括心形图标的旋转和跳舞动画。每个心形图标的都是通过svg矢量图生成的。这样的...
水波纹
SVG波浪线波动起伏动画效果，含多种颜色以及多种弯曲弧度这个效果通过使用SVG（可缩放矢量图形）和CSS以及少量的JS代码创建的波浪动画。实现原理：通过动画化SVG polyline 元素的点（points），使其呈现出波动的效果，看起来像是水波或海浪。
拳击汉堡
基于Zdog和GSAP技术实现「汉堡拳击手」3D动画效果结合Zdog和GSAP库创建了一个有趣的立体汉堡打拳击动画效果，小汉堡的拳击动作非常的娴熟，支持通过鼠标360度拖拽查看细节并且点击后小汉堡会打出一套漂亮的拳击动作！其中Zdog基于SVG创建3...
加载环
通过SVG和CSS实现的多彩圆环加载中Loading动画效果CSS通过keyframes实现的6种颜色圆环转圈加载中Loading动画效果，其中圆环是通过svg矢量图绘制的。非常简约的一款HTML加载器，不足百行代码便可实现。使用起来也很简单只需要将cl...