你可以用SVG做一些非常瘋狂的事情。開(kāi)發(fā)人員可以使用SVG和畫(huà)布功能在沒(méi)有任何圖像文件的情況下將圖形編碼到頁(yè)面上。
這導(dǎo)致了非?？岬捻?xiàng)目，比如我在這里列出的純SVG格局。
霍克灣
這個(gè)美麗的海灣景觀的例子是由路易斯科伊爾開(kāi)發(fā)的。它遵循模仿多邊形顯示的多邊形外觀，通常在3D渲染中找到。
它是SVG和JavaScript的流行效果，但它實(shí)際上并不簡(jiǎn)單。
Louis使用TweenMax庫(kù)創(chuàng)建了風(fēng)格和代碼都很優(yōu)雅的動(dòng)畫(huà)。
如果您曾經(jīng)想要深入研究原始SVG代碼，那么這個(gè)代碼片段有很多值得學(xué)習(xí)的地方。
低聚景觀
這是另一個(gè)以低聚外觀為模型的景觀。
這一部分來(lái)自開(kāi)發(fā)者Luke Reid，并更加關(guān)注3D效果。整個(gè)布局感覺(jué)非常真實(shí)，灑滿星星的天空漸變?yōu)檫@個(gè)設(shè)計(jì)注入了活力。
如果您查看JavaScript代碼，您會(huì)看到星形位置是隨機(jī)生成的。如果您正在設(shè)計(jì)SVG背景或英雄標(biāo)題樣式，這是一個(gè)很酷的效果。
SVG風(fēng)景動(dòng)畫(huà)
Evan Winston開(kāi)發(fā)了這種自定義動(dòng)畫(huà)，可以將所有可見(jiàn)元素慢慢地放入視圖中。
這是一個(gè)非?？岬男Ч?，這是任何人都可以創(chuàng)造的東西。當(dāng)然，這可能不如大背景圖那么有用，主要是因?yàn)閯?dòng)畫(huà)完成所需的時(shí)間。
但是你可以在網(wǎng)站上使用自定義SVG圖標(biāo)做類似的事情。有很多教程可以幫助您設(shè)計(jì)基本的SVG，然后使用上面代碼段中的代碼為它們?cè)O(shè)置動(dòng)畫(huà)。
海洋景觀
對(duì)于基本的湖畔視圖，我真的在挖掘這個(gè)SVG片段。它運(yùn)行一些基本的頁(yè)面動(dòng)畫(huà)，如水中的波浪和背景中的云彩。
所有這些東西都很容易用一點(diǎn)JavaScript。但你會(huì)注意到這個(gè)片段是用純粹的CSS制作的，這讓它更令人印象深刻！
現(xiàn)代CSS3動(dòng)畫(huà)在具有UI / UX動(dòng)畫(huà)的網(wǎng)站中最有用，但您也可以將其用于風(fēng)景或插圖。這是開(kāi)發(fā)人員的一半樂(lè)趣。
冬季景觀
這個(gè)冬季景觀提醒我們每年都會(huì)看到清爽的白雪。
Andrey Sorokin使用SVG代碼和一些JavaScript創(chuàng)建了這個(gè)基本動(dòng)畫(huà)。動(dòng)畫(huà)可能很慢，所以你可能需要花一點(diǎn)時(shí)間才能看到完整的效果。
令我印象深刻的是緩動(dòng)效果的質(zhì)量以及它在瀏覽器中的效果。
根據(jù)有多少元素動(dòng)畫(huà)進(jìn)入視圖，我會(huì)假設(shè)有點(diǎn)遲鈍，但考慮到發(fā)生了多少，它的加載速度非?？臁?/p>
更不用說(shuō)從樹(shù)上出來(lái)的太陽(yáng)的動(dòng)畫(huà)簡(jiǎn)直令人愉快。
SVG風(fēng)景
我們已經(jīng)看到平面設(shè)計(jì)趨勢(shì)和半平面設(shè)計(jì)的大幅增長(zhǎng)，它們都使用沒(méi)有漸變的基本顏色。
此片段遵循相同的樣式，陰影和角落的硬邊。
這是一個(gè)美麗的片段，當(dāng)然是最容易使用SVG的景觀之一。即使您在此代碼段提供了大量?jī)?nèi)容以及許多SVG / XML屬性之前從未使用過(guò)SVG代碼，您也可以在Google上搜索以了解更多信息。
自然景觀
開(kāi)發(fā)商Amr Zakaria使用動(dòng)畫(huà)船和飛機(jī)創(chuàng)造了類似的平面設(shè)計(jì)，以吸引您的注意力。
整個(gè)過(guò)程運(yùn)行在純CSS上，并與一些非常清晰的CSS關(guān)鍵幀動(dòng)畫(huà)一起使用。
如果您有耐心讓它工作，所有這些都可以復(fù)制到網(wǎng)頁(yè)上的背景。最棘手的部分是讓它對(duì)移動(dòng)屏幕做出完全響應(yīng)。
視差燈
在網(wǎng)絡(luò)上的所有視差效果中，這個(gè)是非?；镜摹Ｈ欢擦钊擞∠笊羁?，因?yàn)檎麄€(gè)事情只適用于CSS，不需要腳本。
包括路燈在內(nèi)的所有元素都采用SVG形狀和CSS效果設(shè)計(jì)。
如果你看起來(lái)很近，你會(huì)發(fā)現(xiàn)燈具實(shí)際上使用了CSS陰影效果來(lái)創(chuàng)造逼真的光暈。
基本動(dòng)畫(huà)
在這個(gè)更新的SVG環(huán)境中，您會(huì)發(fā)現(xiàn)大量自定義元素反彈到視圖中。
創(chuàng)作者Stef van Dijk通過(guò)為每個(gè)動(dòng)畫(huà)添加彈跳和重力效果來(lái)仔細(xì)關(guān)注每個(gè)動(dòng)畫(huà)。例如，當(dāng)山脈落入視野時(shí)，您會(huì)注意到地面的反彈效應(yīng)。
這是你仔細(xì)關(guān)注細(xì)節(jié)時(shí)所得到的，這就是為什么我是現(xiàn)代網(wǎng)絡(luò)動(dòng)畫(huà)的忠實(shí)粉絲。
SVG和CSS
看看這支鋼筆的超大背景動(dòng)畫(huà)。這整個(gè)過(guò)程適用于沒(méi)有任何JavaScript的SVG和純CSS。
景觀的層次慢慢進(jìn)入視野，它們都有自己的關(guān)鍵幀動(dòng)畫(huà)。但是一旦他們看到你會(huì)注意到一些元素繼續(xù)移動(dòng)（如太陽(yáng)和云）。
設(shè)計(jì)這樣的東西需要花費(fèi)很多時(shí)間。但它也會(huì)讓你真正熟悉SVG語(yǔ)法以及CSS動(dòng)畫(huà)的基礎(chǔ)知識(shí)。
草
雖然這個(gè)環(huán)境非常簡(jiǎn)單，但我認(rèn)為這對(duì)新的前端編碼員來(lái)說(shuō)是一位很棒的老師。
Felix De Montis從頭開(kāi)始構(gòu)建這個(gè)項(xiàng)目，其中包含少量用于草地，山丘和樹(shù)木的SVG代碼。復(fù)制它并使用CSS更改位置也很容易。
總的來(lái)說(shuō)，如果你進(jìn)入簡(jiǎn)單的SVG設(shè)計(jì)，這個(gè)是一個(gè)很好的起點(diǎn)。如果您正在尋找基本CSS之外的東西，F(xiàn)elix也會(huì)使用LESS預(yù)處理器。
視差頁(yè)
克里斯格魯伯開(kāi)發(fā)了這個(gè)完美無(wú)瑕的視差景觀，它根據(jù)你的鼠標(biāo)移動(dòng)而移動(dòng)。
但與此同時(shí)，他還動(dòng)畫(huà)了某些頁(yè)面元素，如帆船和背景云。
這一切都需要非常少的 JavaScript，因?yàn)樗诓坏?0行的jQuery上運(yùn)行?？紤]到這是多么詳細(xì)，所以更令人印象深刻。