用CSS3创建动画价格表

时间: 2013-12-6 分类: CSS 作者: SAI

TAGS:

153828vol4acbo5s6sdbwv

今天我们将要只使用CSS3来创建一个动画价格表。完全不使用Jquery,不使用图片,不使用Flash。

今天我们将要学到的知识

CSS3线性渐变

CSS3放射渐变

CSS3转换

CSS3动画

先看看示例(只支持Safari和Chrome)

 

第一步 HTML文件

    首先我们要编写基本的HTML代码作为开始。这样我们需要一个表格可以放置我们所有的内容。这个表格有四列六行,代码如下所示:

 

 

  <div id=”grid”>  

    <div id=”detail”>  
        <h1>Hosting</h1>  
        <ul>  
            < li>Space< /li>  
            < li>Bandwidth< /li>  
            < li>Processor< /li>  
            < li>Ram< /li>  
            < li>Price< /li>  
        </ul>  
   </div>  
   
    <div id=”basic”>  
        <h1>Basic</h1>  
        <ul>  
            < 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>  
            < 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>  
            <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样式(译者注:Coda Bubble是一个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 */  

}  

 

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » 用CSS3创建动画价格表
本文地址:http://www.saiody.com/?p=922

返回顶部