完全使用 CSS 和 SVG 构建的 12 个风景场景

已发表: 2021-01-26

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

这导致了非常酷的项目，比如我在这里收集的纯 SVG 风景。

所有这些项目都可以完全免费编辑和使用。他们使用 SVG 代码以及一些基本的 CSS 和 JS 来创建动画、扭曲和视差效果。

霍克斯湾

这个美丽的海湾景观的例子是由 Louis Coyle 开发的。它遵循模仿 3D 渲染中常见的多边形显示的多样式外观。

这是 SVG 和 JavaScript 的流行效果，但实现起来肯定不简单。

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

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

低聚景观

这是另一个仿照低多边形外观的景观。

这个来自开发人员 Luke Reid，更加注重 3D 效果。整个布局感觉非常真实，点缀着星星的天空渐变为这个设计注入了生命。

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

SVG 风景动画

Evan Winston 开发了这个自定义动画，它会慢慢地将所有可见元素放到视野中。

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

但是您可以对网站上的自定义 SVG 图标执行类似的操作。有很多教程可以帮助您设计基本的 SVG，然后使用上面代码片段中的代码（也在 TweenMax 上运行）为它们制作动画。

海洋景观

对于一个基本的湖边视图，我真的在挖掘这个 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

看看这支笔，了解超大的背景动画。整个过程适用于 SVG 和纯 CSS，无需任何 JavaScript。

风景的层次慢慢映入眼帘，它们都有自己的关键帧动画。但是一旦它们出现在视野中，您会注意到一些元素会继续移动（例如太阳和云）。

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

草

虽然这个场景非常简单，但我也认为它是新前端编码人员的好老师。

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

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

视差页面

Chris Gruber 开发了这种完美无瑕的视差景观，它会根据您的鼠标移动而移动。

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

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