8个CSS和JavaScript片段用于创建令人难以置信的照明和阴影效果当谈到创建一个伟大的网络艺术作品时，细节是最突出

当谈到创建一个伟大的网络艺术作品时，细节是最突出的。照明和阴影效果就是最好的例子。它们可以把一个平面的、2D的作品变成一种身临其境的3D体验。

在相当长的一段时间里，为插图或动画添加真实的光影效果的能力似乎是圣杯。这项技术并不总是存在。因此，开发者不得不寻找变通方法来接近这种效果。

值得庆幸的是，CSS和各种JavaScript库的力量已经迎来了一个新的时代。现在可以添加几乎与我们在视频游戏中看到的相同的照明和阴影效果。

今天，我们将分享一些CSS和JavaScript代码片段，将这些效果带入生活。请欣赏

创意✨(点击任何地方)by Anna the Scavenger

文本似乎是一个添加照明和阴影的自然场所。但这个例子把它带到了一个全新的水平。每个字母的创意构成和光标跟随的动画使其成为真正的艺术作品。它类似于一个悬挂在你天花板上的3D手机。更棒的是：点击演示，创造一个全新的外观。

将你的光标放在一张照片的一个上角，然后点击并向下拖动。你会注意到图像被撕裂了。就其本身而言，这是个相当酷的效果。但真正吸引人的是视角变化时的阴影。整个过程感觉非常真实。

参见史蒂夫-加德纳的《钢笔照片撕裂》。

这个三维动画有一个惊人的液体效果。一块金属扭曲并变形为各种物体。由于有了WebGL，逼真的反射使它更有吸引力。

查看Liam Egan的《PenPlatonics》。

没有什么比在聚光灯下表演一场巨大的鼓声独奏更让人兴奋的了。怎么，你没有参加过著名的乐队？也许下一个最好的办法就是玩这个由汉堡包做成的虚拟鼓包。你可以得到声音，聚光灯，甚至是阴影。只是不要把油渍弄到你的新衣服上。

参见史蒂夫-加德纳的《笔拍汉堡》。

在这里，我们有一个像滑溜溜的纯CSS方块阵列。它们的连锁反应动画通过使用照明和阴影得到了进一步加强，你猜对了。梯度增加了深度的错觉，而阴影则随着动画的每一层移动。

请看Josetxu的《单色溜溜球笔--纯CSS》。

这个虚拟艺术装置无疑是抽象的。它的特点是，当你的光标在屏幕上移动时，一个五颜六色的圆球会发生变形。光线增加了一丝真实感。然而，点击 "关灯 "按钮，整个演示就会变成一个粒子爆炸。

请看isladjan的钢笔艺术画廊

通过巧妙的实现，手电筒的效果可以非常惊人。这里它被用来照亮一个岩石表面。多亏了SVG，图像看起来非常逼真。光线和视角都会随着你的光标而移动。它还有一个好处，就是比天黑后在树林里走动更安全。

查看Artem Lvov的PenSVG照明着色器

这个受PAC-MAN启发的片段将这个深受喜爱的视频游戏带入了3D时代。幽灵们在一个照明的立方体中旅行，尖锐的光线在迷宫中迸发出来。光标再一次发挥了作用，因为你可以通过移动来改变场景的视角。

请看伊万-华雷斯-N的《吃豆人概念》。

过去，你需要高端软件来创造令人信服的照明和阴影效果。但是，由于网络技术的进步，类似的增强效果可以通过代码实现。

利用硬件加速的能力也起到了关键作用。如果没有图形处理单元（GPU）的力量，这些先进的场景不可能以如此流畅的动作运行。

放在一起，其结果可能是惊人的。而上面的例子可能只是触及了这种潜力的表面。

想看看更多惊人的3D场景吗？请访问我们的CodePen系列，让你大饱眼福。