【誓言国庆福利】鼠滑上下切入过渡CSS3特效
2014-09-30 19:28:22
- 预览效果图
原本发布两个效果,由于时间关系暂时先发了个~
效果预览地址(底部)http://506896079.taobao.com
鼠滑上下切入过渡CSS3特效!
淘宝天猫通用,已经添加了C店天猫的class名
注意要改偏移left的值!
PS:CSS部分的代码复制到导航CSS里面,HTML部分复制到自定义模块。
代码如下:
css部分
我
[code].shiyan_leftbox li {
float: left;
height: 426px;
margin-left: 4px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 244px;
}
.shiyan_leftbox li a {
float: left;
height: 426px;
width: 244px;
}
.shiyan_leftbox li a .one {
float: left;
height: 213px;
left: 0;
top: -213px;
transition: all 0.5s;
width: 244px;
z-index: 4;
}
.shiyan_leftbox li a .two {
bottom: -213px;
float: left;
height: 213px;
left: 0;
transition: all 0.5s;
width: 244px;
z-index: 4;
}
.shiyan_leftbox li a:hover .one {
top: 0;
}
.shiyan_leftbox li a:hover .two {
bottom: 0;
}
.shiyan_leftbox li a .pic {
float: left;
height: 426px;
left: 244px;
top: 0;
transition: all 0.5s;
width: 244px;
z-index: 3;
}
.shiyan_leftbox li a:hover .pic {
left: 0;
}
[/code]
HTML部分
[hide][code]
[/code]
[/hide]
祝大家国庆快乐!玩得开心~更多代码关注微信
关闭
-
7172
2
2
-
12149
23
89
全部评论()