原文地址：[http://webdesignersdesk.com/2010/08/create-animated-price-grid-using-css3/](http://webdesignersdesk.com/2010/08/create-animated-price-grid-using-css3/) 譯者：蔣宇捷  ?今天我們將要只使用CSS3來創建一個動畫價格表。完全不使用Jquery，不使用圖片，不使用Flash。 ### 今天我們將要學到的知識 CSS3線性漸變 CSS3放射漸變 CSS3轉換 CSS3動畫 ### [先看看示例（只支持Safari和Chrome）](http://webdesignersdesk.com/demo/pricegrid/) ### 第一步 HTML文件 ?首先我們要編寫基本的HTML代碼作為開始。這樣我們需要一個表格可以放置我們所有的內容。這個表格有四列六行，代碼如下所示： <div id="grid"> <div id="detail"> <h1>Hosting</h1> <ul class="hosting"> <li>Space</li> <li>Bandwidth</li> <li>Processor</li> <li>Ram</li> <li>Price</li> </ul> </div> <div id="basic"> <h1>Basic</h1> <ul class="basic"> <li>100 MB</li> <li>1 GB</li> <li>Core 2 Duo</li> <li>512 MB</li> <li>10$</li> </ul> <div>Basic Plan for Small Size business.</div> </div> <div id="premium"> <h1>Premium</h1> <ul class="premium"> <li>2 GB</li> <li>10 GB</li> <li>Core 2 Duo</li> <li>1 GB</li> <li>20$</li> </ul> <div>Run Multiple Website on single CP.</div> </div> <div id="ultimate"> <h1>Ultimate</h1> <ul class="ultimate"> <li>5 GB</li> <li>20 GB</li> <li>Core 2 Duo</li> <li>2 GB</li> <li>30$</li> </ul> <div>Use this for High Traffic Websites.</div> </div></div>? ### 第二步 CSS 現在為我們的HTML文件加上樣式，這里我想使用3個不同的漸變，頭部和價格行采用線性漸變，剩下的行采用放射漸變。如下的代碼帶有詳細解釋。 ~~~ /* 基本的布局，所有的表格都放在這里面 */ #grid { margin-top:200px; margin-left:auto; margin-right:auto; width:605px; height:auto; background-color:#9CF; } /* 第一列 */ #detail { width:150px; float:left; text-align:center; } /* 第二列 */ #basic { width:150px; float:left; text-align:center; } /* 第三列 */ #premium { width:150px; float:left; text-align:center; } /* 第四列 */ #ultimate { width:150px; float:left; text-align:center; } /* 頭部 */ h1 { padding-top:15px; padding-bottom:15px; font-family:Tahoma, Geneva, sans-serif; font-size:20px; font-weight:bold; border:1px solid #CCC; /* Firefox的線性漸變 */ background: -moz-linear-gradient(top, #b0b0b0, #ffffff); /* Safari和Chrome的設置 */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff)); text-shadow: #fff 1px 1px 1px; } li { padding-top:10px; padding-bottom:10px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; border:1px solid #256490; text-shadow: #000 2px 2px 2px; color:#FFF; } li { /* 火狐的設置 */ background: -moz-radial-gradient(50% 50% 90deg,ellipse closest-corner, #296a96 10%, #1c5a85 100%); /* Safari和Chrome的設置 */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #296a96),color-stop(1, #1c5a85)); } /* 為li的最后一個元素設置另外一個樣式 */ ul li:last-child { /* 火狐的設置 */ background: -moz-linear-gradient(top, #7d910f, #aec31f); /* Safari和Chrome的設置*/ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7d910f),color-stop(1, #aec31f)); border:1px solid #8c9d17; font-family:Verdana, Geneva, sans-serif; font-weight:bolder; font-size:18px; } ~~~ ?現在到了編寫動畫的時間。我想讓每一列在鼠標懸停時比原始尺寸更大一些。要實現此效果我們采用CSS3的轉換屬性：列的原始大小為1，當鼠標懸停時變為1.1。如下的代碼帶有注釋。 ~~~ /* 現在我們設置轉換效果來增大鼠標懸停時每一列的大小 */ #basic { /* 火狐的設置 */ -moz-transition: all 0.5s ease-in-out; /* Safari和Chrome的設置 */ -webkit-transition: all 0.5s ease-in-out; } /* Increase the size of Coloumn 10% when hovered */ #basic:hover { /* 火狐的設置 */ -moz-transform:scale(1.1); /* Safari和Chrome的設置 */ -webkit-transform:scale(1.1); } #premium { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } #premium:hover { -moz-transform:scale(1.1); -webkit-transform:scale(1.1); } #ultimate { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } #ultimate:hover { -moz-transform:scale(1.1); -webkit-transform:scale(1.1); } ~~~ ?? 現在當鼠標放在每一列時，需要顯示一個Coda Bubble樣式（譯者注：CodaBubble是一個JQuery的插件，用于顯示冒泡效果的提醒彈出框）的彈出窗口。我們將在每個div下使用一個div來達到目的（#basic、#premiun、#ultimate）。最開始我們將div的透明度設置為0，當鼠標懸停時透明度變為1。在轉換效果淡出0.5秒的延遲后，根據你想要窗口彈出的位置設置它的margin。下面的CSS代碼帶有注釋。 ~~~ #basic > div { width: 100px; height: 50px; position: absolute; padding: 7px; visibility:hidden; opacity: 0; background: -moz-linear-gradient(top, #b0b0b0, #ffffff); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff)); /* 轉換屬性 */ -moz-transition: all 1s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari和Chrome */ } #basic:hover > div { visibility:visible; opacity: 1; margin-top: -150px; margin-left: 170px; /*轉換屬性*/ -moz-transition: all 1s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari和Chrome */ } #premium > div { width: 100px; height: 50px; position: absolute; padding: 7px; visibility:hidden; opacity: 0; background: -moz-linear-gradient(top, #b0b0b0, #ffffff); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff)); /* 轉換屬性 */ -moz-transition: all 1s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari和Chrome */ } #premium:hover > div { visibility:visible; opacity: 1; margin-top: -150px; margin-left: 170px; /* 轉換屬性 */ -moz-transition: all 1s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari和Chrome */ } #ultimate > div { width: 100px; height: 50px; position: absolute; padding: 7px; visibility:hidden; opacity: 0; background: -moz-linear-gradient(top, #b0b0b0, #ffffff); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff)); /* 轉換屬性 */ -moz-transition: all 1s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari和Chrome */ } #ultimate:hover > div { visibility:visible; opacity: 1; margin-top: -150px; margin-left: 170px; /*轉換屬性*/ -moz-transition: all 1s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari和Chrome */ } ~~~ ### [看看示例](http://webdesignersdesk.com/demo/pricegrid/)