依然有 100 种下划线/叠加动画效果 | 高级 CSS 合集🚀

300 个动画还不够？好吧，我又做了 100 个动画，你猜怎么着？依然没有额外的元素，没有伪元素，没有 SVG，没有关键帧，也没有 JS。只有一个元素和一些神奇的过渡效果！

这次我将介绍@property如何为 CSS 变量添加动画效果。Firefox 用户抱歉，由于 Firefox 不支持，大部分动画效果将无法正常显示@property。强烈建议使用 Chrome 或 Edge 浏览器，以便完整体验全部 100 种动画效果！

详情请参阅我之前的文章@property：

我们终于可以实现 CSS 渐变动画了

Temani Afif ・ 2021年2月26日

#css #web开发 #教程

目录

• 形状 II
• 多步骤
• 混合
• 多彩的
• 像素化的
• 《不规则者2》
• 多色 II
• 《各方》第三部
• 幻想曲 IV
• 倒置 IV
• 破碎之二
• 被压垮的
• 51区
• 街机游戏 II

形状 II

多步骤

_{PS：以下所有内容在 Firefox 上均无法运行。}

混合

_{PS：#6 在 Firefox 上无法运行}

多彩的

像素化的

《不规则者2》

多色 II

_{PS：以下所有内容在 Firefox 上均无法运行。}

《各方》第三部

_{PS：#1、#2 和 #7 在 Firefox 上无法运行}

幻想曲 IV

_{PS：以下所有内容在 Firefox 上均无法运行。}

倒置 IV

由于已知漏洞以及缺乏支持，以下代码在 Firefox 上无法运行。@property

破碎之二

被压垮的

51区

☢️ 危险区域：请勿随意悬停在下方，后果自负！

_{PS：#2 在 Firefox 上无法运行}

街机游戏 II

警告：以下内容可能令人不适🤯🤯

_{PS：以下所有内容在Firefox浏览器上均无法运行。}

就是这样！

告诉我你最喜欢哪个👇，如果你想让我做更多动画合集，别忘了点赞❤️🦄哦！我们能达到500个动画的目标吗？你的反馈决定一切！

还有 100 个 CSS 加载器可供您下次使用

Temani Afif ・ 2021年6月15日

#CSS #Web开发 #初学者 #HTML