纯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>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢