html5建站實戰一：特效執行個體

實作3D旋轉動畫(純html5技術實作)

參考執行個體：http://www.html5tricks.com/demo/3d-html5-logo/index.html

實作超酷3D CSS3菜單

參考執行個體：http://www.html5tricks.com/demo/css3-ribbon-menu-1/index.html

效果圖：

下面我們來一起看看實作這款CSS3飄帶菜單的具體過程以及源代碼。源碼主要由HTML代碼和CSS代碼組成，還比較簡單。

<div class=’ribbon’> <a href=’#'><span>Home</span></a> <a href=’#'><span>About</span></a> <a href=’#'><span>Services</span></a> <a href=’#'><span>Contact</span></a> </div>

看HTML代碼非常簡單，幾個a标簽就把菜單的結構描述清楚了，當然主要還是看CSS代碼。

.ribbon { display:inline-block; } .ribbon:after, .ribbon:before { margin-top:0.5em; content: “”; float:left; border:1.5em solid #fff; .ribbon:after { border-right-color:transparent; .ribbon:before { border-left-color:transparent; .ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; height:3.5em; overflow:hidden; .ribbon span { background:#fff; line-height:3em; padding:0 1em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; .ribbon a:hover span { background:#FFD204; margin-top:0; .ribbon span:before { position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; .ribbon span:after { right:0; border-left:0.5em solid #9B8651;

這裡我們又一次應用了CSS3的:before和:after僞類對象，設定了菜單項前後的内容，并做了樣式渲染，實作了滑鼠滑過菜單項出現凸起的立體效果。

3. 自定義HTML5視訊播放器外觀

   參考執行個體：http://www.html5tricks.com/demo/video-js/demo.html 

   效果圖：

4. HTML5樹葉飄落動畫(基于webkit浏覽器)

   參考執行個體：http://www.html5tricks.com/demo/css3-fall-leaves/index.html

5. CSS3圖檔層疊切換動畫

   參考執行個體：http://www.html5tricks.com/demo/css3-fold-p_w_picpath-slider/index.html 

6. CSS3圖檔左右切換彈性動畫

   參考執行個體：http://www.html5tricks.com/demo/html5-css3-elasticity/index.html 

7.   CSS3滑鼠懸停動畫按鈕

   參考執行個體：http://www.html5tricks.com/demo/css3-hover-button-animation/index.html 

8.   CSS3滑鼠懸停動畫菜單按鈕

9.   CSS3垂直手風琴折疊菜單

   參考執行個體：http://www.html5tricks.com/demo/css3-ver-accordion-menu/index.html 

10. CSS3圖檔傾斜效果，可傾斜4個角度

   參考執行個體：http://www.html5tricks.com/demo/css3-p_w_picpath-tilt-effect/index.html 

11. CSS3圖檔洗牌切換動畫特效

   參考執行個體：http://www.html5tricks.com/demo/jquery-css3-p_w_picpath-switch/index.html 

12. jQuery/CSS3圖檔翻轉特效，可水準垂直翻轉

   參考執行個體：http://www.html5tricks.com/demo/jquery-css3-p_w_picpath-rotate/index.html 

13. HTML5/CSS3一組可愛的3D按鈕

   參考執行個體：http://www.html5tricks.com/demo/html5-css3-pretty-button/index.html#