完全使用 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 上運行。考慮到這是多麼詳細，更令人印象深刻。