以下是 html5实现ppt文字幻灯片演示特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="gbk" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>html5ʵ��ppt���ֻõ�Ƭ��ʾ��Ч</title>
<style type="text/css">
<!--
.STYLE3 {font-size: 50px}
.STYLE4 {font-size: 100px}
-->
</style>
<embed src="/bj.mp3" hidden="true" autostart="true" loop="true">
<!--link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" /-->
<link href="css/qqguoji.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported" onLoad="timedCount()">
<div class="fallback-message">
<p>�����������֧��HTML5��������<ddd> 3D </ddd>��Ч����ô�죿</p>
<p><b>�����£�</b></p><p>���������µ� <b>Chrome</b>, <b>Safari</b> ���� <b>Firefox</b> �����(360���٣��ѹ���"����ģʽ"Ҳ����Ŷ~)</p>
</div>
<div id="impress">
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q><p>ǿ�������ߵķֽ� </p><p><b> ������ </b>˭�ܸı���</p></q></div>
<div class="step slide" data-x="0" data-y="-1500">
<q><p>�����ҵ��Ŷ� </p><p><b> �һ������Ϊǿ�� </p></q>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q><p>�ڴ�����</p><p>��һ��<b> ʹ������� </b>����</p></q>
</div>
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<p><span class="try">����ؼ��Ļ��</span></p>
<p> </p>
<p><span class="px60 STYLE3">�����Ʒ�Ŷ�</span>
<!--span class="footnote"><sup>*</sup> no rhyme intended</span-->
</p>
</div>
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>�ܸ�����ʶ��</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>���Ѿ�����Я���߹���<b><span id="shijian"></span></b><span class="thoughts">��</span></p>
</div>
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>����
<b> ����� </b>����</p>
</div>
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p><span class="px60">��</span> <b class="positioning">����</b><b class="rotating">����</b><br> <span class="px60">��</span> <b class="scaling">���ڰ�</b><br /><xiaozi>�������壬��ԸΪ�䣬�ж���������˭�����Һ���һ��</xiaozi></p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p>���ס���ǵIJ�Ʒ�ͷ� <br />
<b class="imagination STYLE4">QQ:10086</b></p>
</div>
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>�������κ����˵��� <br /><b>֪���Լ������ã�</b></p>
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>�� �� �� �� �� ��</p>
</div>
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="have">��</span><span class=" "></span> <span class="noticed">������</span> <span class="its">��</span> <b><span class="in">��</span></b> <sup></sup>��</p>
<span class="footnote">(��ƷӪ��վ�� <a href="http://www.baidu.com/">baidu.com </a>)</span> </div>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
<div class="hint">
<p>��ʹ�� "�ո��" ���� "�ո��" �ٿ�</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>���� \"�� ��\" �ٿ�</p>";
}
</script>
<script src="js/yhc.js"></script>
<script src="js/main.js" charset="utf-8"></script>
<script>impress().init();</script>
<div style="display: none">
<!--<embed src="http://7vzr59.com1.z0.glb.clouddn.com/A%20-%20A.mp3" type="audio/mpeg loop="true" autostart="true" /-->
<audio autoplay="autoplay" loop="loop" src="http://7vzr59.com1.z0.glb.clouddn.com/A%20-%20A.mp3"></audio>
</div>
</body>
</html>JS代码(main.js):
var timestamp = Date.parse(new Date());
var time = timestamp/1000 - 1358006408;
function timedCount(){
document.getElementById('shijian').innerHTML = fmoney(time,0);
time = time + 1;
t = setTimeout("timedCount()",1000);
}
/** ÿ��λ�������һ�����ţ������Ķ� **/
function fmoney(s,n){
n = n > 0 && n <= 20 ? n:2;
s = parseFloat((s + "").replace(/[^\d\.-]/g,"")).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse(),r = s.split(".")[1];
t = "";
for(i = 0;
i < l.length;
i ++ ){
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ",":"");
}
return t.split("").reverse().join("") /*+ "." + r*/
;
}
CSS代码(qqguoji.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body{font-family:'Microsoft Yahei',SimHei,arial,sans-serif;min-height:740px;background:rgb(215,215,215);background:-webkit-gradient(radial,50% 50%,0,50% 50%,500,from(rgb(240,240,240)),to(rgb(190,190,190)));background:-webkit-radial-gradient(rgb(240,240,240),rgb(190,190,190));background:-moz-radial-gradient(rgb(240,240,240),rgb(190,190,190));background:-ms-radial-gradient(rgb(240,240,240),rgb(190,190,190));background:-o-radial-gradient(rgb(240,240,240),rgb(190,190,190));background:radial-gradient(rgb(240,240,240),rgb(190,190,190));}
b,strong{font-weight:bold}
i,em{font-style:italic}
a{color:inherit;text-decoration:none;padding:0 0.1em;background:rgba(255,255,255,0.5);text-shadow:-1px -1px 2px rgba(100,100,100,0.9);border-radius:0.2em;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;-o-transition:0.5s;transition:0.5s;}
a:hover,a:focus{background:rgba(255,255,255,1);text-shadow:-1px -1px 2px rgba(100,100,100,0.5);}
.fallback-message{font-family:'Microsoft Yahei',SimHei,arial,sans-serif;line-height:1.3;width:780px;padding:10px 10px 0;margin:20px auto;border:1px solid #E4C652;border-radius:10px;background:#EEDC94;}
.fallback-message p{margin-bottom:10px;}
.fallback-message ddd{font-size:48px;}
.impress-supported .fallback-message{display:none;}
.step{position:relative;width:900px;padding:40px;margin:20px auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;font-family:'Microsoft Yahei',SimHei,arial,sans-serif;font-size:48px;line-height:1.5;}
.impress-enabled .step{margin:0;opacity:0.3;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-ms-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s;}
.impress-enabled .step.active{opacity:1}
.slide{display:block;width:900px;height:700px;padding:40px 60px;background-color:white;border:1px solid rgba(0,0,0,.3);border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.1);color:rgb(102,102,102);text-shadow:0 2px 2px rgba(0,0,0,.1);font-family:'Microsoft Yahei',SimHei,arial,sans-serif;font-size:30px;line-height:36px;letter-spacing:-1px;}
.slide q{display:block;font-size:80px;line-height:100px;margin-top:100px;margin-left:80px;}
.slide q strong{white-space:nowrap;}
#title{padding:0;}
#title .try{font-size:64px;position:absolute;top:-0.5em;left:5.5em;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);-ms-transform:translateZ(20px);-o-transform:translateZ(20px);transform:translateZ(20px);}
#title h1{font-size:190px;margin-left:0.85em;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);-ms-transform:translateZ(50px);-o-transform:translateZ(50px);transform:translateZ(50px);}
#title .footnote{font-size:32px;}
#big{width:1320px;text-align:center;font-size:40px;line-height:1;}
#big b{display:block;font-size:100px;}
#big .thoughts{font-size:80px;line-height:100px;}
#tiny{width:500px;text-align:center;}
#ing{width:720px}
#ing b{display:inline-block;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;-o-transition:0.5s;transition:0.5s;}
#ing.present .positioning{-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-ms-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px);}
#ing.present .rotating{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);-o-transform:rotate(-10deg);transform:rotate(-10deg);-webkit-transition-delay:0.25s;-moz-transition-delay:0.25s;-ms-transition-delay:0.25s;-o-transition-delay:0.25s;transition-delay:0.25s;}
#ing.present .scaling{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7);-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-o-transition-delay:0.5s;transition-delay:0.5s;}
#imagination{width:600px;}
#imagination .imagination{font-size:120px;}
#source{width:540px;padding-bottom:60px;padding-right:0px;background:url(/images/rbl.jpg) no-repeat;background-position:bottom right;}
#source q{font-size:60px;}
#its-in-3d p{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;/* Y U need this Firefox?! */
-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;}
#its-in-3d span,#its-in-3d b{display:inline-block;-webkit-transform:translateZ(40px);-moz-transform:translateZ(40px);-ms-transform:translateZ(40px);-o-transform:translateZ(40px);transform:translateZ(40px);-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;-o-transition:0.5s;transition:0.5s;}
#its-in-3d .have{-webkit-transform:translateZ(-40px);-moz-transform:translateZ(-40px);-ms-transform:translateZ(-40px);-o-transform:translateZ(-40px);transform:translateZ(-40px);}
#its-in-3d .you{-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);-ms-transform:translateZ(20px);-o-transform:translateZ(20px);transform:translateZ(20px);}
#its-in-3d .noticed{-webkit-transform:translateZ(-40px);-moz-transform:translateZ(-40px);-ms-transform:translateZ(-40px);-o-transform:translateZ(-40px);transform:translateZ(-40px);}
#its-in-3d .its{-webkit-transform:translateZ(60px);-moz-transform:translateZ(60px);-ms-transform:translateZ(60px);-o-transform:translateZ(60px);transform:translateZ(60px);}
#its-in-3d .in{-webkit-transform:translateZ(-10px);-moz-transform:translateZ(-10px);-ms-transform:translateZ(-10px);-o-transform:translateZ(-10px);transform:translateZ(-10px);}
#its-in-3d .footnote{font-size:16px;-webkit-transform:translateZ(-10px);-moz-transform:translateZ(-10px);-ms-transform:translateZ(-10px);-o-transform:translateZ(-10px);transform:translateZ(-10px);}
#its-in-3d.present span,#its-in-3d.present b{-webkit-transform:translateZ(0px);-moz-transform:translateZ(0px);-ms-transform:translateZ(0px);-o-transform:translateZ(0px);transform:translateZ(0px);}
#overview{display:none}
.impress-on-overview .step{opacity:1;cursor:pointer;}
.hint{display:none;position:fixed;left:0;right:0;bottom:200px;background:rgba(0,0,0,0.5);color:#EEE;text-align:center;font-size:50px;padding:20px;z-index:100;opacity:0;-webkit-transform:translateY(400px);-moz-transform:translateY(400px);-ms-transform:translateY(400px);-o-transform:translateY(400px);transform:translateY(400px);-webkit-transition:opacity 1s,-webkit-transform 0.5s 1s;-moz-transition:opacity 1s,-moz-transform 0.5s 1s;-ms-transition:opacity 1s,-ms-transform 0.5s 1s;-o-transition:opacity 1s,-o-transform 0.5s 1s;transition:opacity 1s,transform 0.5s 1s;}
.impress-enabled .hint{display:block}
.impress-on-bored .hint{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px);-webkit-transition:opacity 0.5s 1.5s,-webkit-transform 0s 1s;-moz-transition:opacity 0.5s 1.5s,-moz-transform 0s 1s;-ms-transition:opacity 0.5s 1.5s,-ms-transform 0s 1s;-o-transition:opacity 0.5s 1.5s,-o-transform 0s 1s;transition:opacity 0.5s 1.5s,transform 0s 1s;}
.impress-enabled{pointer-events:none}
.impress-enabled #impress{pointer-events:auto}
/*--Plus By JohnLui--*/
html body.impress-supported div#impress div div#its.step{font-size:60px;}
html body.impress-supported div#impress div div#tiny.step p{font-size:30px;}
html body.impress-supported div#impress div div#tiny.step p b{font-size:120px;}
html body.impress-supported div#impress div div#ing.step p xiaozi{font-size:24px;}
html body.impress-supported div#impress div div#source.step p{font-size:28px;}
html body.impress-supported div#impress div div#source.step p b{font-size:45px;}
.px60{font-size:80px;}
分享到QQ
分享到微博
微信扫一扫
