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

技术点: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

CSS3实现jquery的特效的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  3. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  4. 15个web前端的美轮美奂的 jQuery 图片特效

    jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...

  5. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  6. 9款很酷炫jQuery/HTML5特效应用 有源码哦~

            目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...

  7. 15个CSS3和jQuery的超棒页面过渡效果教程

    来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...

  8. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  9. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

随机推荐

  1. 关于对db_block_gets的理解与实验

    实验 一. 自己手动创建的小表 创建一个区大小为  40k  SYS@ORCL>show parameter db_block_size NAME                         ...

  2. web sevice 生成代理类及使用

    一.生成代理类: VS2008下这样写 wsdl.exe /l:cs /out:D:/ProxyServices.cs http://localhost/WebService.asmx VS2010下 ...

  3. 微信公众号jssdk使用的惨痛经历

    最近一直在做微信公众号开发,遇到个DT的问题: 大家都知道使用jssdk的时候开发人员必须在后台按照官方文档给定的规则生成签名,我前前个月就写好了这个测试demo页面,而且完全正常能用,像分享等这些功 ...

  4. WP8.1和Win8.1的不同之处

    本文仅是个人见解,如有不足或错误之处欢迎批评指正~ 1.Toast: 创建Toast代码差不多但实现机制及管理上不一样 2.ApplicationData: WP8.1多了一个LocalCacheFo ...

  5. UI开发核心问题-UI随屏幕自适应

    屏幕分辨率对UI适配的影响 一般来说,UIRoot都会选择FixSize的缩放模式,这样可以让UI随着分辨率而自动缩放,保持和屏幕相对的大小比例不变,让UI整体看上去不会有变大变小的奇怪现象.但是,还 ...

  6. Myeclipse 2013 professional 破解,下载

    昨天重装了系统,今天重新搭建开发环境,就顺便把Myeclipse升级到了2013,点击下载Myeclipse2013.惯例,需要破解Myeclipse2013,不过我发现我之前的破解Myeclipse ...

  7. ServiceStack.Redis

    什么是Redis 首先,简述一下什么是Redis. Redis是一个开源.支持网络.基于内存.键值对存储数据库,使用ANSI C编写.从2013年5月开始,Redis的开发由Pivotal赞助.在这之 ...

  8. 【leetcode】Longest Substring Without Repeating Characters (middle)

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  9. DJANGO中filter_horizontal和raw_id_fields的作用

    在作多项选择的操作方便性,及单项选择太多时,会有好一点的体验... class UserAuthorAdmin(admin.ModelAdmin): # raw_id_fields = ('group ...

  10. linux Ubuntu12 设置root用户登录图形界面

    Ubuntu 12.04默认是不允许root登录的,在登录窗口只能看到普通用户和访客登录.以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后,修改系统配置文件需要切换到超级用户模式,在终端 ...