纯CSS3创建动画价格表

字体大小【小 中 大】来源：CrazyFrom整理 | 作者：CrazyFrom | 380 views | 2011-02-16

今天我们将要只使用CSS3来创建一个动画价格表。完全不使用Jquery，不使用图片，不使用Flash。使用到CSS3的线性渐变、放射渐变、转换和动画属性。
重点讲到：
1、在鼠标悬停时比原始尺寸更大一些。要实现此效果我们采用CSS3的转换属性：列的原始大小为1，当鼠标悬停时变为1.1。如下的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/* 现在我们设置转换效果来增大鼠标悬停时每一列的大小 */
#basic {
	/* For Mozilla */
	-moz-transition: all 0.5s ease-in-out;
	/* For Safari and Chrome */
	-webkit-transition: all 0.5s ease-in-out;
}
/* 悬停变为1.1*/
#basic:hover {
	/* For Mozilla */
	-moz-transform:scale(1.1);
	/* Safari and 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);
}

2、现在当鼠标放在每一列时，需要显示一个新的样式。我们将在每个div下使用一个div来达到目的（#basic、#premiun、#ultimate）。最开始我们将div的透明度设置为0，当鼠标悬停时透明度变为1。在转换效果淡出0.5秒的延迟后，根据你想要窗口弹出的位置设置它的margin。下面的CSS代码，只列出basic，其它的类推:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#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 and 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 and Chrome */
}

下面来看下效果

你还可修改部分代码再运行看看哦

 
版权所有:为网站而疯狂-给站长一个五星级的家转载请注明来源，谢谢！

已有 1 条评论       我也不甘寂寞

  1. 性感女娲/2011-02-18 08:55

    踩一脚!
    赶紧跑!
    踩出我的风格~
    踩进你的人气
    无聊．来逛逛！…………………………▁▂▃▄▅▆▇█▉▊▋＃＃＃ 回击

    #1

欢迎留言

友情提示：
1、请勿发表色情、违法、商业广告等信息，谢谢。
2、留言想要有头像？请看 “我” 的。


为网站而疯狂 建站学 上海网站建设 Huaidong Blog 龙图网 英文网站设计 电脑疯子技术论坛 申请友链 申请友链