史上最佳 CSS 效果。你从未见过如此惊艳的效果。

我是谁？

1.卡片悬停效果。

2. 登录/注册表单

3. Thanos Snap 图像滑块

4. 图片库

5.加载动画

6. 平铺导航

7. 产品卡

8. 3D内容滑块

9. 页眉动画 - 01

10. 页眉动画 - 02

11. 3D导航栏

你好，世界，欢迎！今天的文章将带你了解一些最惊艳却又被低估的 CSS 效果。所有这些效果都是我亲手创造的。

我是谁？

我叫库纳尔 (kunaal)，来自印度。我热爱编程。我从 12 岁开始编程，现在 16 岁了。去年我开通了一个 YouTube 频道，目前有 100 多个视频。虽然我的 YouTube 频道没有太多点击量，也没有观众，但即便如此，我还是庆幸自己没有放弃，因为也许我的 YouTube 频道正在走向失败，但这确实教会了我很多东西。通过制作 YouTube 视频，我提升了我的 Web 开发技能。我为此感到非常自豪。以下是一些对我来说非常具有挑战性的视频，它们也教会了我很多关于开发的知识。

1.卡片悬停效果。

这个卡片悬停效果其实并不难做。当我想到这个效果的时候，我就觉得它就是我需要为我的频道做的。我花了一天多的时间才弄清楚，如何才能实现这三种不同的悬停效果。

2. 登录/注册表单

这是一个很棒的平滑过渡表单。我喜欢这个。但你知道，我实际上并没有做这个。我正在做别的东西，一个非凡的表单动画。但我做了这个。嗯，我仍然对这个效果很满意。

3. Thanos Snap 图像滑块

这是我做过的最好的东西。我是怎么想到这个主意的呢？嗯，我在 YouTube 上看到了一个编码视频，其中他展示了这种图像捕捉效果。他用视频来实现这个效果。但我想，如果我们能用纯 CSS 来实现这个效果，而不是用视频呢？用纯 CSS 来实现这个效果对我来说真的很难。尝试了几天之后，我意识到只用 CSS 是做不到的。所以我借助了 JS，你猜怎么着，它成功了。我花了整整一周的时间。在上传这个视频的时候，我其实并不在乎观看次数，因为我对这个效果很满意。现在我仍然很满意。

4. 图片库

刚开始频道的时候，我真的很想做一个关于图库的教程视频。但我希望它与众不同。我喜欢苹果MacBook的UI，我的UI灵感就来源于此。我当时就觉得这个视频会爆红网络。没错，我当时傻了，现在也傻了。结果，它连100次观看都没到。😅😅

5.加载动画

这个效果看起来很简单，但对我来说真的很难做。我实际上删除了这个项目两次。唯一的问题是如何将文本的背景图片与标题的背景图片完美对齐。我不知道它看起来是否符合我的预期，但确实非常接近我的预期。

6. 平铺导航

这个导航栏的设计灵感来源于一个 YouTube 视频。视频里，一个家伙在评论别人的作品集网站。那个作品集网站有这个磁贴导航栏。看起来棒极了。我真的很想试试这个效果。我尽力把它做得和我看到的一样完美。不过，它看起来还是很棒的，不是吗？

7. 产品卡

这是我做过的最好的产品卡片。外观惊艳，手感出色，过渡效果也很棒。我们还想要什么呢？而且这个效果完全符合我的想法。

8. 3D内容滑块

做这个真的很有趣。这是我第一个同时使用 CSS 动画、过渡和 JS 的项目之一。我的“3D 图像旋转”视频观看量突破 100 次后，我萌生了做这个的想法。我考虑过把所有东西都做成 3D 的，但最终没能成功。

9. 页眉动画 - 01

在我的频道上，你可以轻松找到五六个这类教程视频。我挺喜欢这些用户体验加载动画的。制作起来并不难，但看起来和感觉都很棒。

我一直以来最喜欢的效果。

10. 页眉动画 - 02

正如我所说，我有点喜欢这些效果。但一开始做起来有点难。这个动画的灵感来自我在网上看到的一个简介。虽然这和我想象的不太一样，但这是我最喜欢的页眉打开动画。

11. 3D导航栏

我做了一个切换导航系统。这个导航也很酷。这个想法是从我的视频“ 3D导航栏”中得到的，但这个视频不是关于3D导航栏的，我的观众在评论里问我能不能让它工作起来。起初我以为很容易，但事实并非如此。我把那个导航栏设计成一个可以工作的导航栏，但它看起来有点不对劲。（你可以在这里查看）之后，我想稍微修改一下设计。于是我就做了这个。一开始做起来很让人沮丧。但我很高兴我做到了。

今天就到这里。我想和大家分享我做过的最好的项目。我想你们会喜欢的。如果你们有什么想问的，欢迎在评论区留言。

如果您愿意，您可以订阅我的 YouTube 频道。

感谢阅读。祝您拥有美好的一天。