经验分享程序开发文档资料数据资源其它资源

jQuery+CSS3实现3D缩略图悬停效果特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3实现3D缩略图悬停效果特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery+CSS3实现3D缩略图悬停效果特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D Thumbnail Hover Effects</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="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style1.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="js/modernizr.custom.69142.js"></script> 
    </head>
    <body>
        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <span class="right">
					<a href="#/photos/ag2r/">Images by Ángelo González</a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			
			<header>
			
				<h1><span>3D Thumbnail</span> Hover Effects</h1>
				<h2>Adding some perspective with CSS3 and jQuery &mdash; <strong>best viewed in WebKit browsers</strong></h2>
				
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
				</nav>
				
				<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="#/photos/ag2r/5439506585/in/photostream">&rarr;</a>
					</div>
					<img src="images/1.jpg" />
				</div>
				<div class="view">
					<div class="view-back">
						<span data-icon="A">210</span>
						<span data-icon="B">102</span>
						<a href="#/photos/ag2r/5629018757/in/photostream">&rarr;</a>
					</div>
					<img src="images/2.jpg" />
				</div>
				<div class="view">
					<div class="view-back">
						<span data-icon="A">690</span>
						<span data-icon="B">361</span>
						<a href="#/photos/ag2r/6271521984/in/photostream">&rarr;</a>
					</div>
					<img src="images/3.jpg" />
				</div>
				<div class="view">
					<div class="view-back">
						<span data-icon="A">987</span>
						<span data-icon="B">130</span>
						<a href="#/photos/ag2r/6131126901/in/photostream">&rarr;</a>
					</div>
					<img src="images/4.jpg" />
				</div>
			</div>
        </div>
		<script type="text/javascript">	
			Modernizr.load({
				test: Modernizr.csstransforms3d && Modernizr.csstransitions,
				yep: ['js/jquery.min.js', 'js/jquery.hoverfold.js'],
				nope: 'css/fallback.css',
				callback : function( url, result, key ) {
						
					if( url === 'js/jquery.hoverfold.js' ) {
				$( '#grid' ).hoverfold();
					}
				}
			});
		</script>
    </body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D Thumbnail Hover Effects</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="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="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="js/modernizr.custom.69142.js"></script> 
    </head>
    <body>
        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <span class="right">
					<a href="#/photos/ag2r/">Images by Ángelo González</a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			
			<header>
			
				<h1><span>3D Thumbnail</span> Hover Effects</h1>
				<h2>Adding some perspective with CSS3 and jQuery &mdash; <strong>best viewed in WebKit browsers</strong></h2>
				
				<nav class="codrops-demos">
					<a href="index.html">Demo 1</a>
					<a class="current-demo" href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
				</nav>
				
				<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="#/photos/ag2r/5033654303/in/photostream">&rarr;</a>
					</div>
					<img src="images/5.jpg" />
				</div>
				<div class="view">
					<div class="view-back">
						<span data-icon="A">210</span>
						<span data-icon="B">102</span>
						<a href="#/photos/ag2r/4846704157/in/photostream">&rarr;</a>
					</div>
					<img src="images/6.jpg" />
				</div>
				<div class="view">
					<div class="view-back">
						<span data-icon="A">690</span>
						<span data-icon="B">361</span>
						<a href="#/photos/ag2r/5439506585/in/photostream">&rarr;</a>
					</div>
					<img src="images/1.jpg" />
				</div>
				<div class="view">
					<div class="view-back">
						<span data-icon="A">987</span>
						<span data-icon="B">130</span>
						<a href="#/photos/ag2r/6271521984/in/photostream">&rarr;</a>
					</div>
					<img src="images/3.jpg" />
				</div>
			</div>
        </div>
		<script type="text/javascript">	
			
			Modernizr.load({
				test: Modernizr.csstransforms3d && Modernizr.csstransitions,
				yep: ['js/jquery.min.js', 'js/jquery.hoverfold.js'],
				nope: 'css/fallback.css',
				callback : function( url, result, key ) {
						
					if( url === 'js/jquery.hoverfold.js' ) {
						$( '#grid' ).hoverfold();
					}

				}
			});
				
		</script>
    </body>
</html>

JS代码(jquery.hoverfold.js):

( function( $ ){
	$.fn.hoverfold = function( args ){
	this.each( function(){
	$( this ).children( '.view' ).each( function(){
	var $item= $( this ),img= $item.children( 'img' ).attr( 'src' ),struct= '<div class="slice s1">';
	struct+='<div class="slice s2">';
	struct+='<div class="slice s3">';
	struct+='<div class="slice s4">';
	struct+='<div class="slice s5">';
	struct+='</div>';
	struct+='</div>';
	struct+='</div>';
	struct+='</div>';
	struct+='</div>';
	var $struct = $( struct );
	$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image','url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
}
);
}
);
}
;
}
)( jQuery );

CSS代码(style1.css):

.view:hover .s2{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);}
.view:hover .s3,.view:hover .s5{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);}
.view:hover .s4{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);}
.view .s1 > .overlay{background:-moz-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);}
.view .s2 > .overlay{background:-moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);}
.view .s3 > .overlay{background:-moz-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:-webkit-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:-o-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:-ms-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);}
.view .s4 > .overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);}
.view .s5 > .overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);}

CSS代码(style3.css):

.view{-webkit-perspective:1000px;-moz-perspective:1000px;-o-perspective:1000px;-ms-perspective:1000px;perspective:1000px;}
.view:hover .s1{-webkit-transform:rotate3d(0,1,0,-55deg);-moz-transform:rotate3d(0,1,0,-55deg);-o-transform:rotate3d(0,1,0,-55deg);-ms-transform:rotate3d(0,1,0,-55deg);transform:rotate3d(0,1,0,-55deg);}
.view:hover .s2,.view:hover .s5{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,20deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,20deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,20deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,20deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,20deg);}
.view:hover .s3{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,30deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,30deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,30deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,30deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,30deg);}
.view:hover .s4{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,40deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,40deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,40deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,40deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,40deg);}
.view .s1 > .overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);}
.view .s5 > .overlay{background:-moz-linear-gradient(right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
194.62 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
194.62 KB
立即下载
赖芬
了解
打赏作者 鼓励作者
Html JS 图片特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章