你可以用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上運行。考慮到這是多么詳細，所以更令人印象深刻。