10 个超酷的 CodePen 演示（3 月 23 日）

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

3D相机图标

Jon Kantner经常出现在 CodePen 的榜单上，他的作品确实精彩绝伦！所以入选也并不奇怪。这个月我把 Jon 的几个演示作品都列入了候选名单（比如这个逼真的玻璃图标和旋转药丸），但这个 3D 相机图标的 CSS 阴影和光照效果简直令人叹为观止。

纯 CSS 景观 #4

Arman Borkhani的这幅 CSS 艺术作品的灵感来源于 Kristofer Haugvik 在 Behance 上的一幅插画（这幅插画本身就令人印象深刻），并在此基础上进行了扩展。简洁的绘画和代码使作品更加美观。

带有 CSS 三角函数的径向菜单

浏览器正在逐步支持三角函数，本月也出现了一些令人兴奋的演示。我很喜欢Una Kravets设计的这个菜单，图标的展开和收起都非常流畅自然，沿着曲线移动的感觉非常柔和。

VR重力操控

我承认我还没试过Caleb Miller的演示，因为我没有 VR 设备，所以无法保证它的效果。但用 JavaScript 和 Three.js 实现这个想法值得列入考虑范围。

文字效果

Kassandra Sanchez（Kass）分享了一些文字特效，让人想起经典的艺术字。这些特效制作简单，引人注目，文字仍然可以选中，而且非常有趣！（此外，有些还带有动画效果！）

那个 3D 文本库 — requestAnimationFrame()

史蒂夫·加德纳继续分享更多精美的动画文本代码示例（继他今年早些时候分享的一些演示之后），这次他分享了一个波浪效果的演示（运行演示前请注意动态效果！）

链接：https ://codepen.io/ste-vg/pen/eYLXMwB

螺旋圆

我喜欢袁川的 CSS 涂鸦。它们新颖独特，而且通常有一种……令人着迷的魔力。这个演示也不例外。色彩搭配完美，线条让我想起弯曲的竹子。我简直移不开眼。

随机行星系统

Josetxu的这个演示作品是 CodePen 挑战赛（随机按钮）的一部分。行星是用 HTML 和 CSS 绘制的，点击按钮时会随机变化。（运行前请注意：它可能会消耗大量系统资源）

演示链接：https://codepen.io/josetxu/pen/QWVajaN

使用单个元素实现酷炫的悬浮效果

Temani Afif的演示使用了 <div> 标签，@property因此它并非在所有浏览器中都能正常工作。如果您看不到它……请使用支持该标签的浏览器，并惊叹于它的效果和简洁性：<img>只需 1 个 HTML 元素 ( ) 和几十行 CSS 代码即可实现。

拟物化液体滑块（CSS，动画）

我不太喜欢拟物化设计，但这个演示很酷。Kostantin Denerz使用 Houdini 为滑块及其周围的元素（一种根据数值上下移动的液体）制作动画，完成了一个互动性强、色彩丰富的演示。