地图
广告
招租
←—
订阅
投稿
网站首页
特效代码
素材资源
seo优化
网络营销
网站建设
免费空间
工具软件
您的位置：
网站首页
>
特效代码
>
网页图片特效
> 正文：
CSS3+jQuery制作的3D图片折叠效果（2）
网页图片特效
CSS3+jQuery制作的3D图片折叠效果（2）
日期：2012-11-6 9:37:00 标签：
css3
jQuery
图片特效
3D效果
折叠效果
js特效
∷
PC蛋蛋 赚积分 换Q币！>>>更多礼品兑换
<!DOCTYPE html> <html lang="en"> <head> <title>CSS3+jQuery制作的3D图片折叠效果（2）丨芯晴网页特效丨CsrCode.CN</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="3D Thumbnail Hover Effects" /> <meta name="keywords" content="3d, 3dtransform, hover, effect, thumbnail, overlay, curved, folded" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="/imagesforcode/201211/4403/css/demo.css" /> <link rel="stylesheet" type="text/css" href="/imagesforcode/201211/4403/css/style_common.css" /> <link rel="stylesheet" type="text/css" href="/imagesforcode/201211/4403/css/style2.css" /> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css' /> <script type="text/javascript" src="/imagesforcode/201211/4403/js/modernizr.custom.69142.js"></script> </head> <body> <div class="container"> <!-- Codrops top bar --> <!--/ Codrops top bar --> <header> <h1><span>3D Thumbnail</span> Hover Effects</h1> <h2>Adding some perspective with CSS3 and jQuery — <strong>best viewed in WebKit browsers</strong></h2> <br><font color=red>▲ 目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><b><a href="http://qiannao.com/file/csr04/0074d5fa/" target=_blank>点此下载本特效源文件</a></b><hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：站酷ZCOOL</p></font> <div class="support-note"><!-- let's check browser support with modernizr --> <!--span class="no-cssanimations">CSS animations are not supported in your browser</span--> <span class="no-csstransforms">CSS transforms are not supported in your browser</span> <span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span> <span class="no-csstransitions">CSS transitions are not supported in your browser</span> <span class="note-ie">Sorry, only modern browsers.</span> </div> </header> <div id="grid" class="main"> <div class="view"> <div class="view-back"> <span data-icon="A">566</span> <span data-icon="B">124</span> <a href="#">→</a> </div> <img src="/images/m05.jpg" /> </div> <div class="view"> <div class="view-back"> <span data-icon="A">210</span> <span data-icon="B">102</span> <a href="#">→</a> </div> <img src="/images/m06.jpg" /> </div> <div class="view"> <div class="view-back"> <span data-icon="A">690</span> <span data-icon="B">361</span> <a href="#">→</a> </div> <img src="/images/m01.jpg" /> </div> <div class="view"> <div class="view-back"> <span data-icon="A">987</span> <span data-icon="B">130</span> <a href="#">→</a> </div> <img src="/images/m03.jpg" /> </div> </div> </div> <script type="text/javascript"> Modernizr.load({ test: Modernizr.csstransforms3d && Modernizr.csstransitions, yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','/imagesforcode/201211/4403/js/jquery.hoverfold.js'], nope: '/imagesforcode/201211/4403/css/fallback.css', callback : function( url, result, key ) { if( url === '/imagesforcode/201211/4403/js/jquery.hoverfold.js' ) { $( '#grid' ).hoverfold(); } } }); </script> </body> </html>
提示：您可以先修改代码后再运行，复制和保存代码功能在Firefox下无效。
（
本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
）
（本文由
CsrCode.CN
|
芯晴网页特效
收集丨
www.CsrCode.cn
）
本文网址：
上一篇：
CSS3+jQuery制作的3D图片折叠效果（1）
下一篇：
CSS3+jQuery制作的3D图片折叠效果（3）
评论信息
抱歉，本文暂停评论留言。
栏目分类
·
菜单导航特效
·
图层样式特效
·
链接文本特效
·
网页图片特效
·
日期时间特效
·
页面窗口特效
·
鼠标特效代码
·
网页背景特效
·
表格表单特效
·
状态栏特效
·
页面搜索特效
·
其他特效代码
热门排行
一款常用的漂亮的JS图片滑动…
jQuery 循环图片滚动切换效果…
JS实现伪3D轮播图片幻灯片切…
一款可控制切换的图片幻灯切…
JS横向带停顿的图片滚动特效…
JS图片滤镜 焦点图片自动切换…
JS模拟FLASH幻灯片图片切换效…
JS+CSS打造的非常漂亮的图片…
一款兼容所有浏览器的js图片…
JS实现的图片横向滚动展示效…
推荐信息
一款漂亮的图片幻灯切换效果…
jQuery版简单实用的图片上下…
仿FLASH动画感应鼠标的图片展…
两款简单实用的jQuery插件版…
[荐] 常用的带缩略图的首页J…
jQuery+JS+CSS打造的动感十足…
[酷] 超酷的感应鼠标变化的图…
[酷] 超酷的图片展示效果
CSS3实现的图片感应鼠标3D旋…
JS模仿2010世博会主页flash焦…
相关信息
背景不停变换颜色
目录式导航菜单
[酷] 神奇的创意相框的图片显…
纯CSS实现的红色风格横向导航…
JS实现的隐藏源代码文件
css实现背景颜色渐变的表格
芯晴网页特效
：
菜单导航特效
图形图像特效
图层样式特效
链接文本特效
日期时间特效
页面窗口特效
网页背景特效
鼠标特效代码
表格表单特效
状态栏特效
搜索特效
其他特效
网站首页
丨
网站地图
© Copyright 2009
CsrCode
-
芯晴网页特效
丨备案号：
浙ICP备15010075号-2
Alex排名
页面执行时间0.2813 s
