另外 100 个下划线/叠加动画 | 扩展的 CSS 集合 🥇🥈

你们都很喜欢我之前收集的100个动画，所以我又带来了一个新合集。现在你们有超过200个不同的动画了！

和上一个类似，你会发现它没有 SVG、没有 JS、没有额外标签、没有伪元素、没有关键帧。只有一个元素和过渡。

享受👍

目录

• 形状
• 双重 II
• 意外之事 II
• 波浪
• 《闪灵》
• 阴影
• 变形者
• 无限 II
• 多彩
• 滑翔 II
• 幻想 II
• 倒立的 II
• 3D II
• 变形

形状

双重 II

意外之事 II

波浪

《闪灵》

阴影

^{我对 (6) 使用了等宽字体，因为所有字符的宽度相同会更方便}

变形者

^{clip-path对于 (3)、(4)、(6) 和 (7)， (21.5px和)内使用的值-38.43px约为tan(angle)xWidth of the element。对于 (5)，这是一个反复试验的值}

无限 II

保持悬停较长时间

多彩

下面适用于等宽字体，我们可以使用该ch单位，并且所有字符具有相同的宽度

滑翔 II

下面要求我们知道元素的宽度，因此它也适用于等宽字体。

幻想 II

倒立的 II

由于已知错误，下面的内容在 Firefox 上无法运行

3D II

我使用变量--d来轻松控制 3D 深度，而无需更改整个代码

变形

就是这样

像往常一样，选择您最喜欢的，然后在下一个系列中再见！

别忘了看看我的 CSS 加载器集合：

为您的下一个项目提供另外 100 个 CSS 加载器

Temani Afif ・ 21年5月25日

#css #webdev #初学者 #html