原文住所:http://webdesignersdesk.com/2010/08/create-animated-price-grid-using-css3/訳者:蒋宇捷
 

 
今日はCSS 3のみを使用してアニメーション価格表を作成します.Jqueryは全く使用せず、画像は使用せず、Flashは使用しません.
今日私たちが学ぶべき知識
CSS 3リニアグラデーション
CSS 3放射グラデーション
CSS 3変換
CSS 3アニメーション
まず例を見てみましょう(SafariとChromeのみサポート)
第一歩HTMLファイル
まず最初に基本的なHTMLコードを作成します.これにより、すべての内容を配置できるテーブルが必要です.この表には4列6行あり、コードは以下の通りです.
 
ステップ2 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;

} 

アニメーションを書く時間になりました.各列をマウスのサスペンション時に元のサイズより大きくしたいです.この効果を達成するには、CSS 3の変換プロパティを使用します.列の元のサイズは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);

} 

各列にマウスを置くと、バブル効果の警告ポップアップボックスを表示するためのJQueryのプラグインであるCoda Bubbleスタイルのポップアップウィンドウが表示されます.各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 */

} 

例を見て