我为你的下一个项目制作了 100 多个 CSS 加载器

不是 100，也不是 200，而是 300！没错，一个全新的集合，总共 300 个 CSS 加载器。

这次，我将依靠更多元素来创建加载器...不，我在开玩笑😜，每个加载器仍然只有一个 <div>，仅此而已！

我们走吧！

css-loaders.com

目录

• 经典三
• 点 III
• 催眠II
• 酒吧 II
• 旋转者 III
• 点与条
• 自然
• 时间
• 形状 III
• 饥饿者
• 不和谐
• 本

经典三

点 III

催眠II

酒吧 II

旋转者 III

^{最后一个旋转器在我给出的 Stack Overflow 答案中有详细说明}

点与条

他们一开始是朋友，但是......

待续 ...

自然

时间

形状 III

饥饿者

不和谐

有人向我挑战，所以我必须接受。

这不是一个完美的复制品，但已经足够接近了😁

本

最后再来个有趣的。我加了个点击处理程序，避免被破坏。点击后等到结束

开个小玩笑，提醒一下你，即使你用了加载器，你的网站也需要足够快 😉 是的，Ben 已经用纯 CSS 完成了，我没有用任何图片。我知道这很疯狂……

就是这样！

希望你喜欢这第三期合集。如果你想看更多，别忘了❤🦄！如果你有什么关于装载机的有趣或疯狂的想法想让我实现，欢迎留言👇

如果你想要更多乐趣的话，我不会只做加载器：

100 多个下划线/叠加动画 | 升级的 CSS 集合 🥇🥈🥉

Temani Afif ・ 21年4月15日

#css #webdev #beginners #codepen