用 CSS 制作的尤克里里琴🎨

HTML 和 CSS

动画和音频

如果你关注我的推特，你大概知道我正在热衷于学习弹奏尤克里里。我一直喜欢听音乐，但从未想过学习演奏乐器，甚至从未想过创作自己的音乐。但近年来，情况发生了变化，现在我自豪地拥有了一把尤克里里。

另一件我一直想尝试的事情是 CSS 艺术。我在 Twitter 上看到了很多精美的艺术作品，它们启发了我创作自己的作品。所以我把编程和音乐融合在这件艺术作品中。

HTML 和 CSS

身体

首先，我使用 div 和伪元素（after 和 before）创建了尤克里里琴的琴身。

琴桥和琴鞍

在添加琴颈之前，我在琴身底部添加了一个琴桥。我还使用伪元素在琴桥顶部琴弦即将结束的地方添加了一个琴鞍。

脖子

接下来是尤克里里的琴颈。它是一个简单的矩形部分。

主轴箱

创建完琴颈后，就该把琴头放在上面了。在本例中，伪元素只是一些紫色的圆圈，它们赋予了尤克里里琴头一个有趣的形状。

调音栓

现在该添加另一端，也就是用来连接琴弦的转轴了。我决定把它们分成两排，每排一对。这样我就可以把它们彼此相对放置。

特纳

使用与前面提到的相同的方法，我添加了翻转器本身。

字符串

现在让我们添加最重要的部分——琴弦。同样，它们彼此之间是相对定位，但在全局容器中是绝对定位。它们恰好位于琴码和琴枕之间。

坚果

关于螺母没有太多要说的，只是一个在全局容器中绝对定位的 div。

其余琴弦

我觉得这部分花了我最长的时间。它们被放在一个单独的容器里。在这个容器里，它们被绝对地、以特定的角度放置，所以它们几乎不会碰到钉子。

音品

许多 div 彼此之间具有相对定位，并且在全局容器中具有绝对定位。

动画和音频

现在，让我们用一些动画和声音来让整个过程栩栩如生。起初，我想让琴弦更逼真，这意味着动画会在交互点开始。但对于这样的项目来说，这太费力了。所以我选择了一个非常简单的动画，琴弦只会左右移动，但动量较小。

为了录制声音，我带了我的尤克里里和手机。我分别录制了每根琴弦，并将音频分配给每根琴弦。

如果您想尝试音频和动画，我为此 CSS 艺术创建了一个单独的网站（仅限桌面）。

如果您想使用这幅艺术作品（带有适当的参考😉），请随时在CodePen上查看。

感谢您的时间！❤

如果你喜欢这篇文章，不妨在Twitter上关注我。我会分享一些项目的小技巧和进展，比如这个项目。如果你有任何问题，欢迎随时在 Twitter 上私信我。