漂浮的猫和立方体

我迫不及待地想要一些“空闲”时间，这样我就可以为我的项目添加样式。一点点交互性可以给页面增添活力。

你想要一只漂浮的猫吗？没问题。我使用 AI 制作了一张猫的图像，并在 Illustrator 中“手动”提取了背景，为我的 .png 图像获得了漂亮的剪切效果。嘭。猫。

让他移动一点，这样他看起来就像是漂浮的。我最喜欢的 CSS 动画之一是轨道。它真的很有用，你可以用它做很多事情。

---

猫

在视图中，我将我的猫的图像带入并为其分配“猫”类

现在，在我的 css 文件中，我构建了“cat”的样式。在 cat 中，我们将我们的动画称为“轨道”，如下所示。

在这里您可以看到，我们“从 0 度角度开始旋转猫”，距离 x 原点 15px，从 0 度开始。

猫在 15px 处绕了一整圈 360 度，一直绕了一圈。 -360 的第二次旋转抵消了第一次旋转，使猫保持直立。如果你只看动画就更容易了。 XD。

我们只是稍微移动了他，因为我们不希望他在页面上飞来飞去。足以令人兴奋。

向左一点，



向右一点。

魔法！

---

立方体

我之前学过如何用 css 创建立方体。虽然这很好，但我今天有了一个疯狂的想法，即以动态的方式重新使用立方体。我想用实时数据填充立方体表面。就像说，接下来的一些即将发生的事件。就像在登陆页面上发现一件有趣的事情一样。为什么不呢。这很令人兴奋。

因此，我在视图中构建了骨架。我们的立方体毕竟需要一个家。

我有一些单选按钮，以便用户可以与多维数据集进行交互。

每个单选按钮都会显示不同的立方体面。

我循环添加我想要在每个面上显示的信息：

每个按钮和侧面都是单独处理的。我很想看到一个更优雅的解决方案（如果存在）。

我真的很兴奋它成功了。

感谢您的浏览！

以上是漂浮的猫和立方体的详细内容。更多信息请关注PHP中文网其他相关文章！