30個(gè)使用CSS3技術(shù)的網(wǎng)頁設(shè)計(jì)欣賞
我們需要學(xué)習(xí)一些使用CSS來實(shí)現(xiàn)的交互，讓網(wǎng)頁更有動(dòng)感，這也是未來的設(shè)計(jì)趨勢(shì)，手機(jī)網(wǎng)站、APP也是如此，把交互設(shè)計(jì)重視起來。CSS3這們技術(shù)，比如簡(jiǎn)單的圓角、下陰影使用，然而這些只是一些基礎(chǔ)，讓我們一起來看下達(dá)人們?cè)O(shè)計(jì)出來的30個(gè)使用CSS3技術(shù)的網(wǎng)頁設(shè)計(jì)。
Jet Edge
一家私人航空公司，網(wǎng)站使用全屏視差切換技術(shù)，這網(wǎng)頁的圖片處理很有感覺，圖片是從左向右慢移，使用看上去像在飛行的感覺。
Quechua – Look Book Spring Summer 14
有些網(wǎng)站就是喜歡帶點(diǎn)動(dòng)感，這個(gè)Quechua就是使用了視屏背景，視覺效果很好。
LanderApp
4N
4N高檔手表網(wǎng)站設(shè)計(jì)，不僅技術(shù)厲害，設(shè)計(jì)師的會(huì)畫也令人驚嘆啊，制作這樣一個(gè)網(wǎng)站成本一定很高了。
CanalSat Series
Forbi studio
Forbi工作室的網(wǎng)站設(shè)計(jì)，頁面上的整體排版不錯(cuò)。
Sonnybono
BORN TRENDY. 一個(gè)現(xiàn)代時(shí)尚的網(wǎng)站。想制作時(shí)髦些，可以參考這個(gè)設(shè)計(jì)。
Magnus Backstedt
Torre 1961
其實(shí)網(wǎng)站首頁不一定要展示很多東西，就像torre一樣，一張產(chǎn)品圖都能有另一番韻味。
Piotr Swierkowski Portfolio
furnitures and design
一個(gè)家居設(shè)計(jì)網(wǎng)站，設(shè)計(jì)以干凈簡(jiǎn)約為主。
VeloSport
一家自行車產(chǎn)品官網(wǎng)，使用全屏的扁平化風(fēng)格設(shè)計(jì)，發(fā)現(xiàn)很多有大圖的網(wǎng)站現(xiàn)在都愛加loading圖像……
BMW ConnectedDrive
在感覺這些強(qiáng)大的技術(shù)同時(shí)，你的網(wǎng)速一定要跟得上…… 當(dāng)然如果在國內(nèi)，用BGP線路也不會(huì)慢的。
瀏覽網(wǎng)站
Digital Agency
The Minute Of Silence
Lime Street
波蘭的一家小型的網(wǎng)頁設(shè)計(jì)公司網(wǎng)站。
Antico Setificio Fiorentino
一家絲綢廠的網(wǎng)站。
CHRONOS Parallax HTML Template
Sleeping Duck
一個(gè)集成購物功能的床墊品牌企業(yè)網(wǎng)站，它的購物體驗(yàn)非常不錯(cuò)，大家可以試下，不同于其它購物商城。
BARNYARD
TRUE
國際化內(nèi)容營銷機(jī)構(gòu)： TRUE.
Benetti
PFD
Smart Slider 2 – Demo
Music is my style
Clos de la Couronne
Xbox Gift Card
Initiative Website
Social Soundscape
TheyCallMeBarry
最后
可以看出，使用CSS3技術(shù)的網(wǎng)站是非常有動(dòng)感的，也是未來網(wǎng)頁設(shè)計(jì)的一大趨勢(shì)。也許也些動(dòng)畫很復(fù)雜，但沒關(guān)系，我們可以從簡(jiǎn)單的做起，比如漸隱、旋轉(zhuǎn)、左右平移、屏幕滾動(dòng)后觸發(fā)動(dòng)畫等等都是不是錯(cuò)方案。
本文地址：http://www.likemindfilms.com/tutorial/de2012.html
- 專訪：石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued：響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率？
- 晉小彥視覺設(shè)計(jì)系列文章（二）：全屏
