酷炫的 CodePen 演示（8 月 4 日）

想法形式

这个演示是一个很酷的想法提交/提醒组件。平滑的过渡、完美的颜色选择和适量的交互营造出良好的用户体验。这是 Jon Kantner 的列表中两个演示中的第一个。

---

摆动机器人

Amit Sheen 再次展示了 CSS 的 3D 威力。这次是一个正在荡秋千的机器人。检查细节，以及不同的身体部位如何一起移动以创建流畅且美丽的动画。

---

鸟瞰大都会

从空中俯瞰城市的令人印象深刻的无限景观（将鼠标移到其上可以改变方向。）您知道是什么让它更加令人惊叹吗？它不使用任何流行的 3D 库！这是普通的 JavaScript。感谢 Niklas Knaack 的精彩演示。

---

钱德勒拥抱专辑表情包生成器

基于最近的政治模因（她也编码了），伊内斯带来了一个受《老友记》启发的模因：钱德勒·比恩拿着一张专辑。套筒是一个文件输入，因此您可以根据需要对图像进行个性化设置。整齐。

---

听说你喜欢旋转

另一个 3D 动画演示。一个漂浮在太空中的平台（？），不停地旋转。 Scott R McGann 的这个催眠演示也是用普通 JavaScript 和画布编写的。

---

情绪板

Hannah 分享了这个图板，它同时也是一个漂亮的网络图片库。很少有动画和过渡，有一种高中/大学的氛围……有人说怀旧吗？

---

3D空间滚动缩放

更多 3D CSS！ （本月的列表中肯定有一种模式。）将滚动驱动的动画与 3D 翻译和不透明度相结合，在纯 CSS 中创建了这种很酷的效果。这是 Adam Argyle 的精彩演示。

---

鲁布·戈德堡 HTML 表单

这是一个有趣的想法，由 Ksenia Kondrashova 巧妙地实现了。当您填写表单时，该装置会移动，使提交按钮更靠近视图。机器可能不实用，但它使形式变得不同，并带来令人惊叹的因素。

---

徽章中的短信预览

乔恩·坎特纳 (Jon Kantner) 的另一个组件。这是一种有趣的数据呈现方式：我们不仅知道有一条消息，而且还可以通过将鼠标悬停在徽章上来阅读它。这对于移动设备之外（悬停效果将是一个挑战）以及网络上的通知也很有用。

---

轮播

最后，还有另一个 3D CSS 演示，这次是由 Vicio Bonura 制作的，他创建了一个 CSS 轮播，可以帮助作为模板生成其他轮播，因为代码简单且易于理解。

---

以上是酷炫的 CodePen 演示（8 月 4 日）的详细内容。更多信息请关注PHP中文网其他相关文章！