前端挑战：🍌香蕉才是最棒的水果

这是 DEV Challenge v24.03.20 的参赛作品，CSS Art：最喜欢的零食。

灵感

我知道苹果有很多优点，但说实话，香蕉简直就是比苹果更胜一筹。香蕉的基因经过人类的优化，拥有了方便携带的包装，而且不像苹果那样有不能吃的果肉。这就是为什么香蕉是我外出时的完美零食，无论是早晨还是晚上，运动前吃一根都很棒，或者作为冰沙或麦片的配料也很不错。

演示

旅行

由于我缺乏艺术天赋，而且香蕉画得歪歪扭扭，所以我没办法直接用网格画。不过，多亏了我以前玩过《我的世界》，我知道用方块或者CSS像素也能创作出很棒的艺术作品。但是，像素画也不是我的强项，所以我找了个模板，加了几个表情稍微装饰了一下。

然后我想直接用无数个背景颜色不同的div元素，以网格形式排列，最终拼成一根香蕉。但考虑到香蕉大约是30x50像素大小，那需要1500个div元素，所以我决定搜索一下，看看能不能把整个过程做得更清晰一些，然后我找到了这篇很棒的文章，它介绍了如何使用CSS的box-shadow属性来创建像素艺术。

为了让整个过程更具互动性，我使用了伪元素 hover 和 active 来实现剥香蕉的效果。当然，为了让观众的注意力在香蕉上停留超过 3 秒，我特意添加了关键帧动画。