[CSS3技术]用CSS3制作一个令人印象深刻的产品展示

[tr][td]　　在您的网站上任何页面产品页面上展示产品。它用一些截图来描述它的功能。你对你的产品建立了游客的兴趣，但越来越难做原来在抓住他们的注意力。幸运的是JavaScript库可以帮助你做出一个飞溅效果。

　　impress.js是一个小的、独立的库，它可以很容易地设计出先进的CSS3演示抢眼效果。








 
 
 Impressive CSS3 Product Showcase | Tutorialzine Demo
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 

HTML


 Introducing Galaxy Nexus



 Android 4.0
 Super Amoled 720p Screen

 




 Simplicity in Android 4.0


 Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..

 




 Connect & Share


 Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing..

 



 Instant Upload


 Your photos upload themselves with Instant Upload, which makes ..

 



 Jam on with Google Music


 Google Music makes discovery, purchase, and listening effortless and..

 


CSS
#impress:not(.impress-not-supported) .step{
 opacity:0.4;
}
#impress .step{
 width:700px;
 height: 600px;
 position:relative;
 margin:0 auto;
 -moz-transition:1s opacity;
 -webkit-transition:1s opacity;
 transition:1s opacity;
}
#impress .step.active{
 opacity:1;
}
#impress h2{
 font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
 color:#444648;
 position:absolute;
 z-index:10;
}
#impress p{
 font: normal 18px/1.3 'Open Sans', sans-serif;
 color:#27333f;
 position:absolute;
 z-index:10;
}
#impress img{
 position:absolute;
 z-index:1;
}


Js
$(function(){
 var imp = impress();
 $('#arrowLeft').click(function(e){
 imp.prev();
 e.preventDefault();
 });
 $('#arrowRight').click(function(e){
 imp.next();
 e.preventDefault();
 });
});
在线演示
[/td][/tr]