循環(huán)是現(xiàn)代瀏覽器中HTML5視頻標(biāo)簽下的布爾屬性，包括IE9在內(nèi)的主流瀏覽器都支持這一屬性。它能讓一個(gè)或者一系列視頻短片循環(huán)播放。開發(fā)者社區(qū)中，網(wǎng)頁設(shè)計(jì)師非常青睞這一功能，并且截至目前影響了許多項(xiàng)目，讓網(wǎng)站看起來更加絢麗和精彩。

從作品展示類的網(wǎng)站到移動端的專題頁，循環(huán)視頻背景的運(yùn)用范疇非常廣泛。網(wǎng)頁開發(fā)者們將5~10的視頻作為背景循環(huán)播放，而視頻內(nèi)容通常會展現(xiàn)出某個(gè)主題，或者有目的性地展現(xiàn)達(dá)成某個(gè)目標(biāo)的過程，呈現(xiàn)企業(yè)或者團(tuán)隊(duì)的潛在實(shí)力。這種展現(xiàn)方式比起傳統(tǒng)的網(wǎng)頁設(shè)計(jì)手法，更能挑起用戶的興趣，引人注意，豐富的信息量和多變的內(nèi)容會讓整體的用戶體驗(yàn)再上一級臺階。雖然這些視頻拍攝起來非常的費(fèi)神費(fèi)力，也許你需要趴在地上拍攝一些場景，但是當(dāng)網(wǎng)站出來之后，你會發(fā)現(xiàn)這些努力都是值得的。

如果你還是下不了決心，那么一起來看看下面這些優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品吧。克服重重障礙制作出的循環(huán)動態(tài)背景是如何震撼人心的。

擁有介紹功能的循環(huán)視頻和看起來優(yōu)雅簡約的導(dǎo)航結(jié)合到一起，其他產(chǎn)品則使用了高清圖片作為背景，同樣起到了卓有成效的導(dǎo)航作用。

Webgriffe 使用循環(huán)視頻來支撐他們的品牌形象，一系列精心拍攝的短視頻被剪輯成短短的十幾秒，不僅介紹了品牌的特色，還用到位的拍攝手法營造出令人難忘的場景，循環(huán)播放給用戶強(qiáng)化品牌印象。視頻當(dāng)中還通過一組工作流程的展示來呈現(xiàn)了他們的專業(yè)性。

從視頻的第一秒開始，Spacejunk 就將這個(gè)品牌獨(dú)特的印記印在用戶心頭，獨(dú)一無二的視覺設(shè)計(jì)和精致入微的視頻圖像令人流連忘返。專業(yè)的設(shè)計(jì)和強(qiáng)大的執(zhí)行性配合著循環(huán)播放，循環(huán)視頻的作用機(jī)會被他們運(yùn)用到了極致。

毫無疑問這個(gè)充滿吸引力著陸頁是通過循環(huán)視頻來營造出充滿吸引力的界面的。設(shè)計(jì)師明智地將界面劃分為三個(gè)部分，在視覺上營造出趣味性和娛樂性，最后又落腳在工作流上。

這里的循環(huán)視頻被用作鼓勵那些熱愛生活的人，循環(huán)播放的視頻內(nèi)容被劃分為兩個(gè)部分，創(chuàng)造性地展示了兩種生活方式的差異。

Gsacepoint 是一個(gè)典型的單頁網(wǎng)站，它主要的功能是引導(dǎo)用戶關(guān)注Fox電視臺的罪案劇。設(shè)計(jì)巧妙地通過三個(gè)子頁面和風(fēng)格陰郁的循環(huán)視頻背景來營造出陰謀的氛圍。

多虧了這組壯觀的風(fēng)景視頻和田園風(fēng)光的特寫，Pastamancini 網(wǎng)站充滿了活力和自然的氛圍，頁面中其他的元素也很好地呼應(yīng)了這部分內(nèi)容。

充滿了活力的雪山場景和運(yùn)動的氛圍被幾個(gè)短視頻完全展現(xiàn)了出來，為了烘托出視頻內(nèi)容，網(wǎng)頁在配色和視覺元素的選取上也獨(dú)具匠心，烘托出了雪山和運(yùn)動的主題。

Distill 項(xiàng)目是一個(gè)為創(chuàng)意工作者而準(zhǔn)備的項(xiàng)目，提供個(gè)人和商用的創(chuàng)意短視頻。歡迎頁面中漂亮的視頻景觀不僅有歡迎之用，而且也是體現(xiàn)整個(gè)項(xiàng)目價(jià)值的重要組成部分。

打開 Drygital 的頁面，映入眼簾的短視頻充滿了動態(tài)和炫目的效果，褪色特效讓視頻同浮動于視頻之上的LOGO看起來對比明顯。巧妙地視頻色調(diào)調(diào)整讓整個(gè)網(wǎng)站的視覺元素相輔相成。

Trif 的設(shè)計(jì)看起來頗為先鋒，給人感覺非常的復(fù)雜。這種神秘而曖昧的視頻內(nèi)容選取，很容易喚醒用戶對于網(wǎng)站內(nèi)容的興趣。

如何借助短視頻展現(xiàn)出積極向上地情緒，營造出有趣而好玩的氛圍？看看這個(gè)網(wǎng)站你就會知道這樣的循環(huán)視頻背景要怎么拍，如何剪輯才行。

借助循環(huán)視頻來展現(xiàn)團(tuán)隊(duì)工作流程，可以說是這類視頻設(shè)計(jì)的一個(gè)重要分支。Z+ 的官網(wǎng)也是這么玩兒的，不過它們還在視頻中植入了好幾個(gè)微妙的暗示作為彩蛋。

Boo Cat 俱樂部首頁所使用的視頻傳達(dá)出的愉悅氛圍同網(wǎng)站的口號“鮮活&生動”相互呼應(yīng)，這種設(shè)計(jì)讓用戶和網(wǎng)站在情緒上更容易相互呼應(yīng)。

網(wǎng)站首頁參考了三聯(lián)畫的結(jié)構(gòu)來營造布局，靜態(tài)的畫面之下隱藏了精彩而細(xì)膩的循環(huán)視頻。它們呼應(yīng)了三聯(lián)畫的藝術(shù)主題，還借助技術(shù)讓這種藝術(shù)形式擁有了更強(qiáng)的生命力。

整個(gè)首頁是基于一個(gè)包含了若干不同含義短視頻的循環(huán)視頻組，其中每個(gè)視頻長度為5秒，充滿張力，各不相同，略顯古怪，但是令人印象深刻。

為了讓整個(gè)網(wǎng)站看起來創(chuàng)意十足，整個(gè)循環(huán)視頻背景是由5個(gè)專業(yè)的小視頻組成的，手繪字體和視頻背景相得益彰，排版設(shè)計(jì)也是精心制作而成。你可以在這個(gè)網(wǎng)站感受到專業(yè)的電影人的專業(yè)和熱忱。

通過美妙如畫的視頻，Vesper酒店力圖為每個(gè)訪客呈現(xiàn)出它獨(dú)特的美和獨(dú)一無二的體驗(yàn)，讓你感受到它所提供的令人難忘的時(shí)光。

Tours Altitude 打破了首頁以單個(gè)循環(huán)視頻為核心的設(shè)計(jì)手法，不同主題的視頻同底部不同導(dǎo)航區(qū)塊聯(lián)系到了一起，光標(biāo)移動到不同區(qū)塊的時(shí)候會展現(xiàn)出不同的內(nèi)容。

通過優(yōu)質(zhì)而細(xì)膩的循環(huán)視頻來展現(xiàn)產(chǎn)品的不同側(cè)面，從而讓用戶對產(chǎn)品有清晰而完整的認(rèn)知，這也是循環(huán)視頻的重要功能之一。