CSS3实现jquery的特效

实现 “慕课网” 的图片滑过缩放的效果

技术点：css3——   -webkit-transform:scale(1.2); 

.course-list-img .img_1:hover{
     -webkit-transform:scale(0.8,1.2);     //宽度缩小80%,高度放大120%
     -moz-transition:scale(0.8,1.2);
}
.course-list-img .img_2:hover{
     -webkit-transform:scale(0.5);       //宽高缩小50%
     -moz-transform:scale(0.5);
}
.course-list-img .img_3:hover{
     -webkit-transform:scale(-1.2,1.2);     //先翻转再放大1.2倍
     -moz-transform:scale(-1.2,1.2);
}
.course-list-img .img_4:hover{
     -webkit-transform:scale(1.2);       //宽高放大120%  -慕课网用的就是这个
     -moz-transform:scale(1.2);
}

需要详细了解scale,可以查看scale语法

效果查看：http://runjs.cn/detail/0t5mwk9v

实现放大缩略图（CSS3）

通过使用overflow:visible

效果仅见：http://runjs.cn/detail/exwrb9rn

同上的效果

效果仅见：http://runjs.cn/detail/dbitgkfz

css3使得鼠标移入图片，其他图片模糊

效果仅见：http://runjs.cn/detail/pgnqjrgh

css3实现悬浮小图标

效果仅见：http://runjs.cn/detail/kqvjqdlp

css实现仿鱼泡提示框

效果仅见：http://runjs.cn/detail/1gdgfvea