- 又来一波~
有图有真相
效果预览地址（底部）http://506896079.taobao.com
鼠标滑过位移过渡+从小到大、透明到不透明、旋转720度过渡
淘宝天猫通用，已经添加了C店天猫的class名
注意要改偏移left的值！
PS：CSS部分的代码复制到导航CSS里面，HTML部分复制到自定义模块。
代码如下：
css部分
[code].lisuming_shiyan .lisuming_shiyan01 {
opacity: 0;
transition: all 1s ease;
transform: rotate(0deg) scale(0.1);
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transform: rotate(0deg) scale(0.1);
-moz-transform: rotate(0deg) scale(0.1);
-webkit-transform: rotate(0deg) scale(0.1);
-o-transform: rotate(0deg) scale(0.1);
}
.lisuming_shiyan:hover .lisuming_shiyan01 {
transform: rotate(720deg) scale(1.0);
opacity: 1;
-ms-transform: rotate(720deg) scale(1.0);
-moz-transform: rotate(720deg) scale(1.0);
-webkit-transform: rotate(720deg) scale(1.0);
-o-transform: rotate(720deg) scale(1.0);
}
.shiyan_lsm:hover .lisuming_shiyan02 {
transform:translate(60px, 0);
-webkit-transform:translate(60px, 0);
-moz-transform:translate(60px, 0);
-ms-transform:translate(60px, 0);
-o-transform:translate(60px, 0);
}
.shiyan_lsm:hover .lisuming_shiyan03 {
transform:translate(-60px, 0);
-webkit-transform:translate(-60px, 0);
-moz-transform:translate(-60px, 0);
-ms-transform:translate(-60px, 0);
-o-transform:translate(-60px, 0);
}
.shiyan_lsm:hover .lisuming_shiyan04 {
transform:translate(0, -60px);
-webkit-transform:translate(0, -60px);
-moz-transform:translate(0, -60px);
-ms-transform:translate(0, -60px);
-o-transform:translate(0, -60px);
}
[/code]
HTML部分[hide]
[code]
[/code]
[/hide]
以往的帖子
【誓言】CSS3+Hover鼠标经过弹出购买按钮标题
[url]http://www.zhisheji.com/thread-8304-1-1.html
【誓言】Hover鼠标滑过CSS3过渡位移效果（如图）
[url]http://www.zhisheji.com/thread-9341-1-1.html
【誓言】Hover+CSS3鼠标滑过向上浮动
[url]http://www.zhisheji.com/thread-9619-1-1.html
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
誓言芜罪
全部评论()