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

CSS3教程手机阅读

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

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

<!DOCTYPE html>

<html>

<head>

<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

</body>

</html>

HTML

<h2>Introducing Galaxy Nexus</h2>

<p>Android 4.0<br /> Super Amoled 720p Screen<br />

</div>

<h2>Simplicity in Android 4.0</h2>

<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>

</div>

<h2>Connect & Share</h2>

<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>

</div>

<h2>Instant Upload</h2>

<p>Your photos upload themselves with Instant Upload, which makes ..</p>

</div>

<h2>Jam on with Google Music</h2>

<p>Google Music makes discovery, purchase, and listening effortless and..</p>

</div>

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;

}

$(function(){

var imp = impress();

$('#arrowLeft').click(function(e){

imp.prev();

e.preventDefault();

});

$('#arrowRight').click(function(e){

imp.next();

e.preventDefault();

});

在线演示

【用CSS3制作一个令人印象深刻的产品展示】相关文章

1. 用CSS3制作一个令人印象深刻的产品展示

2. 令人印象深刻的 jQuery 模态框插件 – iLightBox

3. 令人印象深刻的 jQuery 模态框插件 – iLightBox

4. 一款令人印象深刻的 HTML5 射击游戏

5. 16 个印象深刻的 HTML5/CSS3/JavaScript 体验

6. 利用Jquery和CSS3 技术制作一副幻灯片

本文来源：https://www.51html5.com/a955.html

点击展开全部

上一篇：Jquery+CSS3实现一款简洁大气带滑动效果的弹出层下一篇：CSS3菜单气泡提示

﹝用CSS3制作一个令人印象深刻的产品展示﹞相关内容

「用CSS3制作一个令人印象深刻的产品展示」相关专题

css

复制网址收藏网址分享到微信分享到微博分享到QQ

CSS3教程

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

﹝用CSS3制作一个令人印象深刻的产品展示﹞相关内容

「用CSS3制作一个令人印象深刻的产品展示」相关专题

其它栏目

也许您还喜欢