开发人员□□□用代码完□□□成令人惊□□叹的事情□□□□的能力永◣远不会令□□人惊叹。当然，功能仍然□□□□扮演着重□□要的角色。但是这些□□□□天来，我们也看□□□□到一些超□□凡脱俗的□□□□视觉效果□□□在 CSS 和 JavaScript 等的帮助□□□下变得栩□□栩如生。
 
今天，我们将重□□□□点关注一□□□□个肯定会□□□引起您注□□意的领域：背景图案。请注意，这里没有□□□微妙之处。我们即将□□□□向您展示□□□□的代码片□□□段将音量□□调高至11。有些甚至□□□□包括遥远□□□的动画来·增强效果。
 
杰玛·斯蒂尔斯 (Gemma Stiles ) 创作的 60 年代壁纸
 
这种复古□□□□风格的橙□□□□色和蓝色□□□□混合是用◥高达八行◣的 SCSS 创建的。虽然它不□□□□是动画的，但以正确□□的方式凝□□视它确实◇提供了运□□□□动的感觉。
 

 
摩尔纹，请由 Marjel
 
这里我们□□□□有另一个□□橙色和蓝□□□□色的例子，这次是在□□□混合中添□□加了运动。这是一种□□□莫尔（干涉）图案，观看起来□□□□非常强烈。嘈杂的外□□观让人想□□起在廉价□□电视上玩□□□□的旧电子□□游戏。那些对这□□□种视觉效□□果有不良□□反应的人□□可能想要□□□避免这种□□□视觉效果。
 

 
Bailh的太阳王
 
这部迷幻□□动画看起·来像是在□□摇滚音乐□□□会的大屏□□幕上出现□□□□的。JavaScript 驱动的效□□□□果非常吸□□□□引人且错□□□□综复杂。而且由于□□□它的运动◆有些温和，您甚至可□□□能会想在□□自己的项□□□□目中使用□□□它。
 

 
Brandon Brule的“G”代表发电机
 
SVG 是创建背□□□景图案和□□□效果的绝□□□□佳工具，因为它们□□□□清晰且灵●活。此代码段□□提供了一□□□种随机或□□通过设置□□□面板创建□□□自己的模□□□□式的方法。
 

 
利亚姆·伊根（Liam Egan）的目标
 
很少有东◢西能引起□□□用户的注·意，比如运动□□□□和颜色的□□□结合。在这里，我们有一※个非常有□□□效地使用□□□这种串联○的例子。当它们飞◣过时，迷人的、幽灵般的※靶心会被□□□□色带增强。结果是一□□□种模式可□□以让您保□□持兴趣，而不是吓□□跑您。
 

 
huibvg都是三角形
 
有些事情□□□□在简单时□□会更好。这是一个□□示例，说明如何□□组合几个□□□形状以创□□□□建看起来□□比实际复□□杂得多的□□东西。这组不同□□□□色调的 SVG 三角形（查看片段□□左上角的□□□□白色轮廓）散发出3D 氛围，鼓励用户●继续盯着□□□看。
 

 
Carpe Numidium 接合的联锁装置
 
保持简单□□□的主题，看看这个□□纯 CSS 模式。它本质上□□□是一组在□□□□屏幕上重✦复的互锁□□□□形状。而且，再一次，结果看起□□□□来不仅仅□□□□是其部分□□□的总和。尤其是当□□□您认为此□□代码段少□□□于 70 行代码时。使用Photoshop重复此操□□作会更加□□耗时。
 

 
ichimonzi的三次乐趣
 
同一屏幕□□上有多个□□□□动画图案？“异端，”你说。实际上，它实际上□□□非常酷。三列相等，每列都有□□□□不同的颜□□□色和动画□□□风格。它们声音▽很大，但似乎也□□□很好地融◥合在一起。作为奖励，将鼠标悬丨停在一列◇上，它就会展◢开。在某种程□□度上，它让人想◢起电视节□□□□目，背景是一□□□□堵监视器□□□墙。
 

 
在大多数□□情况下，上面的片□□段对于日□□□□常使用来□□□□说并不实◤用（除非你喜□□□欢整个野□□□蛮的东西）。但这就是◆让他们变□□得有趣的□□部分原因。哎呀，这就是使 CodePen 本身如此●出色的原□□因。它用于实□□□□验和创造□□□你可能不•会尝试的□□东西。
 
有时，您从构建❖彩色图案□□□□之类的东□□西中获得□□的知识可□□能会再次□□□用于更通◈用的目的。只是经验❖本身可以□□□□是有益的。
 
因此，虽然这些□□模式可能◇会像拇指❖疼痛一样□□突出，但它们确□□□实起到了◈重要作用。也许他们▽适合网页□□设计师对□□□□自我提升♦的追求。