以下是 css3立体相册突出特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3立体相册突出效果</title>
<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/css3_3d.css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script>
if (!Modernizr.csstransforms) {
$(document).ready(function(){
$(".close").text("Back to top");
});
}
</script>
</head>
<body>
<div id="container">
<!--[if lte IE 8]>
<noscript>
<style>
#information li { overflow: visible; position: relative; margin: 0 auto; margin-bottom: 25px; background: #fff; width: 600px; padding: 30px; height: auto; list-style: none; }
#information li div a.close { position: relative; background: transparent; padding: 0; color: #0090e2; font-size: 12px; font-weight: normal; left: 0; top: 0; }
iframe, .backface { display: none; }
</style>
</noscript>
<![endif]-->
<h2 class="title"><span>css3立体相册突出效果</span></h2>
<ul id="grid" class="group">
<li>
<div class="details">
<h3>Lanterns</h3>
<a class="more" href="#info1">view details</a>
</div>
<a class="more" href="#info1"><img src="images/lanterns.jpg" /></a>
</li>
<li>
<div class="details">
<h3>Tree</h3>
<a class="more" href="#info2">view details</a>
</div>
<a href="#info2"><img src="images/tree.jpg" /></a>
</li>
<li class="end">
<div class="details">
<h3>Cable Car</h3>
<a class="more" href="#info3">view details</a>
</div>
<a href="#info3"><img src="images/cablecar.jpg" /></a>
</li>
<li>
<div class="details">
<h3>London Eye</h3>
<a class="more" href="#info4">view details</a>
</div>
<a href="#info4"><img src="images/londoneye.jpg" /></a>
</li>
<li>
<div class="details">
<h3>Golden Statue</h3>
<a class="more" href="#info5">view details</a>
</div>
<a href="#info5"><img src="images/statue.jpg" /></a>
</li>
<li class="end">
<div class="details">
<h3>Under the Bridge</h3>
<a class="more" href="#info6">view details</a>
</div>
<a href="#info6"><img src="images/bridge.jpg" /></a>
</li>
<li>
<div class="details">
<h3>Pregnant Maiden</h3>
<a class="more" href="#info7">view details</a>
</div>
<a href="#info7"><img src="images/maiden.jpg" /></a>
</li>
<li>
<div class="details">
<h3>Clouds of Doom</h3>
<a class="more" href="#info8">view details</a>
</div>
<a href="#info8"><img src="images/clouds.jpg" /></a>
</li>
<li class="end">
<div class="details">
<h3>Silver Statue</h3>
<a class="more" href="#info9">view details</a>
</div>
<a href="#info9"><img src="images/statue2.jpg" /></a>
</li>
</ul>
</div>
</body>
</html>
JS代码(modernizr.js):
/* Modernizr custom build of 1.7:cssanimations | csstransforms | csstransforms3d | csstransitions | touch */
window.Modernizr=function(a,b,c){
function G(){
}
function F(a,b){
var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+p.join(c+" ")+c).split(" ");
return!!E(d,b)}
function E(a,b){
for(var d in a)if(k[a[d]]!==c&&(!b||b(a[d],j)))return!0}
function D(a,b){
return(""+a).indexOf(b)!==-1}
function C(a,b){
return typeof a===b}
function B(a,b){
return A(o.join(a+";
")+(b||""))}
function A(a){
k.cssText=a}
var d="1.7",e={
}
,f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l=b.createElement("input"),m=":)",n=Object.prototype.toString,o=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),p="Webkit Moz O ms Khtml".split(" "),q={
svg:"http://www.w3.org/2000/svg"}
,r={
}
,s={
}
,t={
}
,u=[],v,w=function(a){
var c=b.createElement("style"),d=b.createElement("div"),e;
c.textContent=a+"{
#modernizr{
height:3px}
}
",h.appendChild(c),d.id="modernizr",g.appendChild(d),e=d.offsetHeight===3,c.parentNode.removeChild(c),d.parentNode.removeChild(d);
return!!e}
,x=function(){
function d(d,e){
e=e||b.createElement(a[d]||"div");
var f=(d="on"+d)in e;
f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=C(e[d],"function"),C(e[d],c)||(e[d]=c),e.removeAttribute(d))),e=null;
return f}
var a={
select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"}
;
return d}
(),y=({
}
).hasOwnProperty,z;
C(y,c)||C(y.call,c)?z=function(a,b){
return b in a&&C(a.constructor.prototype[b],c)}
:z=function(a,b){
return y.call(a,b)}
,r.touch=function(){
return"ontouchstart"in a||w("@media ("+o.join("touch-enabled),(")+"modernizr)")}
,r.cssanimations=function(){
return F("animationName")}
,r.csstransforms=function(){
return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])}
,r.csstransforms3d=function(){
var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);
a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));
return a}
,r.csstransitions=function(){
return F("transitionProperty")}
;
for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));
e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){
a=a.toLowerCase();
if(!e[a]){
b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;
return e}
}
,A(""),j=l=null,e._enableHTML5=f,e._version=d,g.className=g.className.replace(/\bno-js\b/,"")+" js "+u.join(" ");
return e}
(this,this.document)CSS代码(css3_3d.css):
/* -------------------------------------------------------------------------------------------------------------------------A CSS3 presentation demonstrating how to take advantage of modern browsers while still allowing the content to be easilyaccessible in older,less capable browsers.Inspired by http://playground.deaxon.com/css/lightbox by http://twitter.com/deaxon---------------------------------------------------------------------------------------------------------------------------- */
h2.title{font-size:68px;letter-spacing:-3px;font-weight:bold;text-align:center;margin-top:35px;text-shadow:0px 1px 0px rgba(255,255,255,0.6);}
h2.title span{font-size:38px;line-height:48px;display:block;letter-spacing:-2px;color:rgba(51,51,51,0.5);}
/* -------------------------------------------------------------------------------------------------------------------------Grid of images---------------------------------------------------------------------------------------------------------------------------- */
#grid{margin:35px 0;}
/*Add the transition affect to the images in the grid. Any changes to the element will be transtioned from it's current state,for example on:hover */
#grid li{float:left;list-style:none;margin:0 25px 25px 0;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,0.25);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4);-moz-box-shadow:0 0 4px rgba(0,0,0,0.2);box-shadow:0 0 4px rgba(0,0,0,0.2);-webkit-transition:all 0.15s ease-in;-moz-transition:all 0.15s ease-in;-ms-transition:all 0.15s ease-in;transition:all 0.15s ease-in;}
#grid li.end{margin-right:0;}
#grid li:nth-child(3n){margin-right:0;}
#grid li:hover{z-index:2;-webkit-transform:scale(1.2) translateY(-40px);-moz-transform:scale(1.2) translateY(-40px);-ms-transform:scale(1.2) translateY(-40px);transform:scale(1.2) translateY(-40px);-webkit-box-shadow:0 15px 35px rgba(0,0,0,0.3);-moz-box-shadow:0 15px 35px rgba(0,0,0,0.3);box-shadow:0 15px 35px rgba(0,0,0,0.3);}
/*Rotate left hand column to the left upon hover */
#grid li:nth-child(3n-2):hover{-webkit-transform:scale(1.2) translate3d(0,-30px,0) rotate(-2.5deg);-moz-transform:scale(1.2) translateY(-30px) rotate(-2.5deg);-ms-transform:scale(1.2) translateY(-30px) rotate(-2.5deg);transform:scale(1.2) translateY(-30px) rotate(-2.5deg);}
/*Rotate every third li with:nth-child(3n) (right hand column in this demo) to the right upon hover */
#grid li:nth-child(3n):hover{-webkit-transform:scale(1.2) translate3d(0,-30px,0) rotate(2.5deg);-moz-transform:scale(1.2) translateY(-30px) rotate(2.5deg);-ms-transform:scale(1.2) translateY(-30px) rotate(2.5deg);transform:scale(1.2) translateY(-30px) rotate(2.5deg);}
#grid img,li[id]:target div,#grid li,.backface{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#grid .details{position:absolute;bottom:0;background:#fff;background:rgba(255,255,255,0.87);border-top:1px solid #fff;width:270px;border-bottom:1px solid rgba(0,0,0,0.25);padding:10px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 -2px 4px rgba(0,0,0,0.35);-moz-box-shadow:0 -2px 4px rgba(0,0,0,0.35);box-shadow:0 -2px 4px rgba(0,0,0,0.35);}
#grid .details h3{margin-bottom:0px;letter-spacing:-1px;}
#grid .details a.more{position:absolute;right:10px;top:5px;font-size:12px;padding:6px 10px;background-color:rgba(0,0,0,0.03);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:15px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.15),0 1px 0 rgba(255,255,255,0.6);-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.15),0 1px 0 rgba(255,255,255,0.6);box-shadow:inset 0 0 3px rgba(0,0,0,0.15),0 1px 0 rgba(255,255,255,0.6);-webkit-transition:all 0.15s ease-in;}
#grid .details a.more:hover{background-color:#0090e2;color:#fff;}
#information{z-index:20;}
#information li div h3{background-color:#0090E2;border-radius:5px 5px 0 0;color:#fff;font-size:20px;font-weight:bold;margin:-30px -30px 20px;padding:15px 30px;text-shadow:rgba(0,0,0,0.4492);text-shadow:1px 1px 1px rgba(0,0,0,0.45);letter-spacing:-2px;}
/* -------------------------------------------------------------------------------------------------------------------------Using:target we can style the specific ID of the list item when clicked/tapped on eg:www.url.com/#info1---------------------------------------------------------------------------------------------------------------------------- */
li[id]:target{width:100%;height:100%;opacity:1;z-index:10;position:fixed;overflow-x:hidden;/* overflow-y:scroll;*/
margin-bottom:25px;}
li[id]:target::-webkit-scrollbar{width:8px;background-color:rgba(0,0,0,0.6);position:relative;left:}
li[id]:target::-webkit-scrollbar-thumb{-webkit-border-radius:1ex;background-color:#6CF;}
li[id]:target div{position:relative;margin:0 auto;top:15%;background:#fff;width:600px;padding:30px;-webkit-box-shadow:0 1px 8px #000;-moz-box-shadow:0 1px 8px #000;box-shadow:0 1px 8px #000;-webkit-animation:lightbox 0.75s cubic-bezier(0,0,0,1);-moz-animation:lightbox 0.5s cubic-bezier(0,0,0,1);}
/*Style list items with an ID */
li[id]{overflow:hidden;position:absolute;width:0;height:0;left:0;top:0;opacity:0;background:rgba(0,0,0,.8);-webkit-transition:opacity 0.2s cubic-bezier(0,0,0,1);-moz-transition:opacity 0.2s cubic-bezier(0,0,0,1);transition:opacity 0.2s cubic-bezier(0,0,0,1);}
/*Lightbox close button */
li[id] div a.close{background:#000;position:absolute;top:-10px;left:-10px;line-height:0;color:#fff;text-align:center;font-weight:bold;border:2px solid #fff;padding:12px 9px 9px;border-radius:30px;-webkit-box-shadow:rgba(0,0,0,0.3) 1px 1px 1px;-moz-box-shadow:rgba(0,0,0,0.3) 1px 1px 1px;box-shadow:rgba(0,0,0,0.3) 1px 1px 1px;}
/*Animation keyframes for the lightbox.First line is at 0% so we're setting it to be 5x the actual size and rotate it around the Y axis by -270 degrees100% resets it's actual size and resets the rotation back to flat. */
@-webkit-keyframes lightbox{0%{-webkit-transform:scale(5) rotateY(-270deg);}
100%{-webkit-transform:scale(1) rotateY(0deg);}
}
@-moz-keyframes lightbox{0%{-moz-transform:scale(5) /* rotateY(-270deg) */
;}
100%{-moz-transform:scale(1) /* rotateY(0deg) */
;}
}
/* -------------------------------------------------------------------------------------------------------------------------Use Modernizer (http://www.modernizr.com) to display content for browsers that don't support CSS Transforms.It now defaults to linking to the ID ie:www.url.com/#info3 and moving to that position on the page.---------------------------------------------------------------------------------------------------------------------------- */
.no-csstransforms #information li{overflow:visible;position:relative;margin:0 auto;margin-bottom:25px;background:#fff;width:600px;padding:30px;height:auto;list-style:none;}
.no-csstransforms #information li div a.close{position:relative;background:transparent;padding:0;color:#0090e2;font-size:12px;font-weight:normal;left:0;top:0;}
CSS代码(reset.css):
/*html5doctor.com Reset Stylesheetv1.42009-07-27Author:Richard Clark - http://richclarkdesign.com*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}
body{line-height:1;}
article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;outline:0;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
CSS代码(style.css):
/*Float clearing goodness from Handcrafted CSS book ------------------------------------------------------------- */
.group:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
* html .group{height:1%;}
*:first-child+html .group{min-height:1px;}
body{background:#ddd url(../images/noise.jpg);font-family:Arial,Helvetica,sans-serif;}
@font-face{font-family:'BonvenoCFLight';src:url('../fonts/BonvenoCF-Light-webfont.eot?') format('eot'),url('../fonts/BonvenoCF-Light-webfont.woff') format('woff'),url('../fonts/BonvenoCF-Light-webfont.ttf') format('truetype'),url('../fonts/BonvenoCF-Light-webfont.svg#webfontIEwcSbIo') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'AdelleBasicBold';src:url('../fonts/adellebasic_bold-webfont.eot?') format('eot'),url('../fonts/adellebasic_bold-webfont.woff') format('woff'),url('../fonts/adellebasic_bold-webfont.ttf') format('truetype'),url('../fonts/adellebasic_bold-webfont.svg#webfontll9eFuSn') format('svg');font-weight:normal;font-style:normal;}
#container{width:920px;padding:0 20px;margin:0 auto;}
#header{height:36px;background:url(../images/bluesquares.gif);position:relative;}
#header a.g3d{background:url(../images/g3dlabs.png);text-indent:-9999px;width:145px;height:50px;display:block;position:absolute;left:12px;top:4px;}
h1{background:url(http://intranet.global3digital.com/intranet/assets/images/g3dlogo.gif) no-repeat;width:170px;height:38px;text-indent:-9999px;}
h1,h2,h3,p{color:#333;}
h2{font-family:'AdelleBasicBold',Arial,sans-serif;}
h3{font-family:'BonvenoCFLight',Arial,sans-serif;margin-bottom:20px;}
a{text-decoration:none;color:#0090e2;}
a.ig:hover{background:#0090e2;color:#fff;padding:3px 10px;border-radius:20px;}
p{line-height:23px;margin-bottom:20px;}
p:last-of-type{margin-bottom:0px;}
#carbonads-container{margin:0 auto 50px;width:300px;}
#carbonads-container .carbonad .carbonad-tag{text-align:left !important;}
分享到QQ
分享到微博
微信扫一扫
