纯CSS3表格特效动画

| 阅读数:--次| 作者:小猪仔
摘要：纯CSS3表格特效动画
html5代码
运行代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> IE不支持请使用火狐和谷歌等</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
	#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;  
	}  
	#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);  
	}  
	#basic > div {  
		 width: 100px;  
		 height: 80px;  
		 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 */  
	}  
	ul{
		padding-left:0;
		list-style:none;
	}
  </style>
 </head>

 <body>
  <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>
 </body>
</html>
返回顶部

Copyright © 2014 网址:www.webkfa.com

学到老代码浏览 关闭浏览