你可以用SVG做一些非常疯狂的事情。开发人员可以使用SVG和画布功能在没有任何图像文件的情况下将图形编码到页面上。

这导致了非常酷的项目，比如我在这里列出的纯SVG格局。

 

 

霍克湾

 

这个美丽的海湾景观的例子是由路易斯科伊尔开发的。它遵循模仿多边形显示的多边形外观，通常在3D渲染中找到。

它是SVG和JavaScript的流行效果，但它实际上并不简单。

Louis使用TweenMax库创建了风格和代码都很优雅的动画。

如果您曾经想要深入研究原始SVG代码，那么这个代码片段有很多值得学习的地方。

低聚景观

这是另一个以低聚外观为模型的景观。

这一部分来自开发者Luke Reid，并更加关注3D效果。整个布局感觉非常真实，洒满星星的天空渐变为这个设计注入了活力。

如果您查看JavaScript代码，您会看到星形位置是随机生成的。如果您正在设计SVG背景或英雄标题样式，这是一个很酷的效果。

SVG风景动画

Evan Winston开发了这种自定义动画，可以将所有可见元素慢慢地放入视图中。

这是一个非常酷的效果，这是任何人都可以创造的东西。当然，这可能不如大背景图那么有用，主要是因为动画完成所需的时间。

但是你可以在网站上使用自定义SVG图标做类似的事情。有很多教程可以帮助您设计基本的SVG，然后使用上面代码段中的代码为它们设置动画。

海洋景观

对于基本的湖畔视图，我真的在挖掘这个SVG片段。它运行一些基本的页面动画，如水中的波浪和背景中的云彩。

所有这些东西都很容易用一点JavaScript。但你会注意到这个片段是用纯粹的CSS制作的，这让它更令人印象深刻！

现代CSS3动画在具有UI / UX动画的网站中最有用，但您也可以将其用于风景或插图。这是开发人员的一半乐趣。

冬季景观

这个冬季景观提醒我们每年都会看到清爽的白雪。

Andrey Sorokin使用SVG代码和一些JavaScript创建了这个基本动画。动画可能很慢，所以你可能需要花一点时间才能看到完整的效果。

令我印象深刻的是缓动效果的质量以及它在浏览器中的效果。

根据有多少元素动画进入视图，我会假设有点迟钝，但考虑到发生了多少，它的加载速度非常快。

更不用说从树上出来的太阳的动画简直令人愉快。

SVG风景

我们已经看到平面设计趋势和半平面设计的大幅增长，它们都使用没有渐变的基本颜色。

此片段遵循相同的样式，阴影和角落的硬边。

这是一个美丽的片段，当然是最容易使用SVG的景观之一。即使您在此代码段提供了大量内容以及许多SVG / XML属性之前从未使用过SVG代码，您也可以在Google上搜索以了解更多信息。

自然景观

开发商Amr Zakaria使用动画船和飞机创造了类似的平面设计，以吸引您的注意力。

整个过程运行在纯CSS上，并与一些非常清晰的CSS关键帧动画一起使用。

如果您有耐心让它工作，所有这些都可以复制到网页上的背景。最棘手的部分是让它对移动屏幕做出完全响应。

视差灯

在网络上的所有视差效果中，这个是非常基本的。然而它也令人印象深刻，因为整个事情只适用于CSS，不需要脚本。

包括路灯在内的所有元素都采用SVG形状和CSS效果设计。

如果你看起来很近，你会发现灯具实际上使用了CSS阴影效果来创造逼真的光晕。

基本动画

在这个更新的SVG环境中，您会发现大量自定义元素反弹到视图中。

创作者Stef van Dijk通过为每个动画添加弹跳和重力效果来仔细关注每个动画。例如，当山脉落入视野时，您会注意到地面的反弹效应。

这是你仔细关注细节时所得到的，这就是为什么我是现代网络动画的忠实粉丝。

SVG和CSS

看看这支钢笔的超大背景动画。这整个过程适用于没有任何JavaScript的SVG和纯CSS。

景观的层次慢慢进入视野，它们都有自己的关键帧动画。但是一旦他们看到你会注意到一些元素继续移动（如太阳和云）。

设计这样的东西需要花费很多时间。但它也会让你真正熟悉SVG语法以及CSS动画的基础知识。

草

虽然这个环境非常简单，但我认为这对新的前端编码员来说是一位很棒的老师。

Felix De Montis从头开始构建这个项目，其中包含少量用于草地，山丘和树木的SVG代码。复制它并使用CSS更改位置也很容易。

总的来说，如果你进入简单的SVG设计，这个是一个很好的起点。如果您正在寻找基本CSS之外的东西，Felix也会使用LESS预处理器。

视差页

克里斯格鲁伯开发了这个完美无瑕的视差景观，它根据你的鼠标移动而移动。

但与此同时，他还动画了某些页面元素，如帆船和背景云。

这一切都需要非常少的 JavaScript，因为它在不到20行的jQuery上运行。考虑到这是多么详细，所以更令人印象深刻。