黄山网络公司：8令人惊叹的CSS和JavaScript动画代码片段，用于增强插图

插图可以给任何网站带来高度的艺术风格。无论是手绘还是数字化创建这些图片可以帮助我们讲述一个故事，传达一些想法。就其本身而言，一个伟大的插图可能是相当强大的东西。但是，只要有一点魔法，我们就能给他们带来更大的影响。

黄山网络公司通过使用CSS和JavaScript，插图既可以是动画的，也可以是交互式的。他们可以从一个故事的静态片段到中心元素。

下面是一组将插图带到下一个层次的片段。每一个都是可编辑的，所以你可以自由地玩，看看它们会如何增强你的下一个项目。

四叉树显示

四叉树是一个有趣的概念(别担心，我不得不查一下)。本质上，它们是一个树状数据结构，每个节点都有四个子节点。加布里埃尔·西里略采纳了这一原则，把他的自画像变成了一部动画片。效果很美，调色板可以通过JS编辑。

互动光

并不是所有的插图都要描绘一个特定的主题。它们也可以由纯的随机性。这是一个引人入胜的交互式绘图功能，当用户拖着画布时，它会产生一个抖动的线条和动画灯光效果的脉冲组合。

不是你的标准布局

这个例子通常是一个简单而有吸引力的图形，并将它变成一个吸引注意力的多部分动画。本网站的要素线框在屏幕上“绘制”并包含可点击链接和悬停效果。这使用户能够成为故事的一部分。

虫子！

这里我们有一个互动的插图，让人联想到儿童的棋盘游戏。盘旋在小路上的各种点上，可以看到像蠕虫一样的生物，它们会突然出现并露出它们的脸。非常有趣和异想天开。

移动部件

这个在几个层次上是相当惊人的。这是一个多层次的视差滚动将普通页眉转换为更多交互式故事书的效果。效果是令人信服的，但肮脏，不均匀的底部边框确实使这看起来像一件独特的艺术品。

视角的转变

设计师莫汉·卡德卡(MohanKhadka)用一幅插图创建了一个互动布局，用户可以在各种社交媒体平台上与他联系。但真正的好处是左上角的“我的屏幕”切换视角，看看他想象的笔记本电脑屏幕上是什么。正是这额外的一步使它脱颖而出。

插图城市

这幅有趣的城市天际线图提供了一些互动的实际例子。悬停在建筑物(或摩天轮)上会导致物体被着色。这些元素也可以点击，这可能是非常有用的绘画会议中心或音乐会场地。这里使用的概念可以在许多不同的情况下创建一个用户友好的UI。

结构图

虽然这个“阴阳”符号的图解并没有什么互动性，但它确实提出了一个关于插图的重要观点。我们经常使用这些类型的图像来共享相关信息，但是我们并不总是使用最好的图像格式。但是，由于设计师AnaTudor在这个例子中使用了SVG，所以整个东西的尺寸都很漂亮。这使用户能够更仔细地查看详细信息。它使用标准的HTML文本，这使得它更多可接近.

不止是一幅图像

正如我们黄山网络公司所看到的，这些插图可以发挥比标准静态图像更大的作用。他们可以帮助用户浏览您的网站，理解一个概念，或添加一个有趣的元素的混合。使用一些代码，如上面的例子，可以帮助您获得一些惊人的结果。