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
CSS3实现jquery的特效的更多相关文章
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- 基于jQuery+CSS3实现人物跳动特效
分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
- 15个web前端的美轮美奂的 jQuery 图片特效
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- 9款很酷炫jQuery/HTML5特效应用 有源码哦~
目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...
- 15个CSS3和jQuery的超棒页面过渡效果教程
来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
随机推荐
- 关于对db_block_gets的理解与实验
实验 一. 自己手动创建的小表 创建一个区大小为 40k SYS@ORCL>show parameter db_block_size NAME ...
- web sevice 生成代理类及使用
一.生成代理类: VS2008下这样写 wsdl.exe /l:cs /out:D:/ProxyServices.cs http://localhost/WebService.asmx VS2010下 ...
- 微信公众号jssdk使用的惨痛经历
最近一直在做微信公众号开发,遇到个DT的问题: 大家都知道使用jssdk的时候开发人员必须在后台按照官方文档给定的规则生成签名,我前前个月就写好了这个测试demo页面,而且完全正常能用,像分享等这些功 ...
- WP8.1和Win8.1的不同之处
本文仅是个人见解,如有不足或错误之处欢迎批评指正~ 1.Toast: 创建Toast代码差不多但实现机制及管理上不一样 2.ApplicationData: WP8.1多了一个LocalCacheFo ...
- UI开发核心问题-UI随屏幕自适应
屏幕分辨率对UI适配的影响 一般来说,UIRoot都会选择FixSize的缩放模式,这样可以让UI随着分辨率而自动缩放,保持和屏幕相对的大小比例不变,让UI整体看上去不会有变大变小的奇怪现象.但是,还 ...
- Myeclipse 2013 professional 破解,下载
昨天重装了系统,今天重新搭建开发环境,就顺便把Myeclipse升级到了2013,点击下载Myeclipse2013.惯例,需要破解Myeclipse2013,不过我发现我之前的破解Myeclipse ...
- ServiceStack.Redis
什么是Redis 首先,简述一下什么是Redis. Redis是一个开源.支持网络.基于内存.键值对存储数据库,使用ANSI C编写.从2013年5月开始,Redis的开发由Pivotal赞助.在这之 ...
- 【leetcode】Longest Substring Without Repeating Characters (middle)
Given a string, find the length of the longest substring without repeating characters. For example, ...
- DJANGO中filter_horizontal和raw_id_fields的作用
在作多项选择的操作方便性,及单项选择太多时,会有好一点的体验... class UserAuthorAdmin(admin.ModelAdmin): # raw_id_fields = ('group ...
- linux Ubuntu12 设置root用户登录图形界面
Ubuntu 12.04默认是不允许root登录的,在登录窗口只能看到普通用户和访客登录.以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后,修改系统配置文件需要切换到超级用户模式,在终端 ...