-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path3D浪漫表白PPT.html
93 lines (87 loc) · 7.12 KB
/
3D浪漫表白PPT.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!-- saved from url=(0045)http://114.bblsm.cn/web.php?id=qDCVnKc#/bored -->
<html style="height: 100%;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--<base href="http://114.bblsm.cn/biaobai_3DlangmanPPT/">--><base href=".">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>3D浪漫表白PPT</title>
<link href="./3D浪漫表白PPT_files/impress-demo.css" rel="stylesheet">
<style type="text/css">
body {
font-family: 'PT Sans', sans-serif;
min-height: 740px;
background: url(/url_test/20180310104219.jpg);
color:#fff
}
</style></head>
<body class="impress-supported impress-enabled impress-on-bored" style="height: 100%; overflow: hidden;">
<div class="fallback-message">
<p>亲爱的，手机不支持特效，使用电脑浏览看惊喜哦！</p>
</div>
<div id="impress" style="position: absolute; transform-origin: left top 0px; transition: all 0ms ease-in-out 0ms; transform-style: preserve-3d; top: 50%; left: 50%; transform: perspective(1000px) scale(1);"><div style="position: absolute; transform-origin: left top 0px; transition: all 0ms ease-in-out 0ms; transform-style: preserve-3d; transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(1000px, 1500px, 0px);">
<div id="bored" class="step slide active present" data-x="-1000" data-y="-1500" style="position: absolute; transform: translate(-50%, -50%) translate3d(-1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); transform-style: preserve-3d;">
<q>此网页送给我最心爱的人某某某，认真聆听我的内心独白哦！</q>
</div>
<div class="step slide future" data-x="0" data-y="-1500" id="step-2" style="position: absolute; transform: translate(-50%, -50%) translate3d(0px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); transform-style: preserve-3d;">
<q>你是一个活泼 可爱的女孩 很善良，天真浪漫，虽然我们接触的时间不长，只有短短几个月，却让我感觉是那么的熟悉与开心</q>
</div>
<div class="step slide future" data-x="1000" data-y="-1500" id="step-3" style="position: absolute; transform: translate(-50%, -50%) translate3d(1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); transform-style: preserve-3d;">
<q>难以忘记初次见面的感觉，我被一种神奇的东西吸引，那时我的心七上八下的，我相信这就是一见钟情</q>
</div>
<div id="title" class="step future" data-x="0" data-y="0" data-scale="4" style="position: absolute; transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(4); transform-style: preserve-3d;">
<span class="footnote"><sup>☆</sup>那以后，你的一个微笑，一个表情，都深深的留在了我的心里</span>
</div>
<div id="its" class="step future" data-x="850" data-y="3000" data-rotate="90" data-scale="5" style="position: absolute; transform: translate(-50%, -50%) translate3d(850px, 3000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg) scale(5); transform-style: preserve-3d;">
<p>我一次次的更加确定，你就是我一直等待的人</p>
</div>
<div id="big" class="step future" data-x="3500" data-y="2100" data-rotate="180" data-scale="6" style="position: absolute; transform: translate(-50%, -50%) translate3d(3500px, 2100px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(180deg) scale(6); transform-style: preserve-3d;">
<p style="font-size: 40px; line-height: 60px;">只要你愿意，我可以陪你去任何你想去的地方我可以陪你去吃任何你喜欢吃的东西，我可以陪你去做你想做的事。</p>
</div>
<div id="tiny" class="step future" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1" style="position: absolute; transform: translate(-50%, -50%) translate3d(2825px, 2325px, -3000px) rotateX(0deg) rotateY(0deg) rotateZ(300deg) scale(1); transform-style: preserve-3d;">
<p>总之你愿意，我会一直陪着你。</p>
</div>
<div id="ing" class="step future" data-x="3500" data-y="-850" data-rotate="270" data-scale="6" style="position: absolute; transform: translate(-50%, -50%) translate3d(3500px, -850px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(270deg) scale(6); transform-style: preserve-3d;">
<p>某某某，能够遇见你 对我来说是最大的幸福</p>
</div>
<div id="imagination" class="step future" data-x="6700" data-y="-300" data-scale="6" style="position: absolute; transform: translate(-50%, -50%) translate3d(6700px, -300px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(6); transform-style: preserve-3d;">
<p>无论何时我都会支持你，相信你，保护你！你开心我便开心，你不高兴我也会很难过！</p>
</div>
<div id="source" class="step future" data-x="6300" data-y="2000" data-rotate="20" data-scale="4" style="position: absolute; transform: translate(-50%, -50%) translate3d(6300px, 2000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(20deg) scale(4); transform-style: preserve-3d;">
<p></p>
<p>在以后的日子里，也许有很的多无法确定但唯一可以确定的是，我会一直珍惜你</p>
</div>
<div id="one-more-thing" class="step future" data-x="6000" data-y="4000" data-scale="2" style="position: absolute; transform: translate(-50%, -50%) translate3d(6000px, 4000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(2); transform-style: preserve-3d;">
<p>我会努力让你成为世上第二幸福的人，因为</p>
</div>
<div id="its-in-3d" class="step future" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2" style="position: absolute; transform: translate(-50%, -50%) translate3d(6200px, 4300px, -100px) rotateX(-40deg) rotateY(10deg) rotateZ(0deg) scale(2); transform-style: preserve-3d;">
<p>爱上你是我最大的幸福</p>
</div>
<div id="overview" class="step future" data-x="3000" data-y="1500" data-scale="10" style="position: absolute; transform: translate(-50%, -50%) translate3d(3000px, 1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(10); transform-style: preserve-3d;">
</div>
</div></div>
<div class="hint">
<p>使用 “空格键” 或者 “↑ ↓ ← →” 操控哦！</p>
</div>
<script src="./3D浪漫表白PPT_files/hm.js.下载"></script><script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>按下 \"← →\" 操控</p>";
}
</script>
<script src="./3D浪漫表白PPT_files/impress.js.下载"></script>
<script>impress().init();</script>
<link rel="stylesheet" href="./3D浪漫表白PPT_files/cuplayer.css">
<div style="position:absolute; top:50px; right:50px;">
<audio id="main_audio" autoplay="autoplay" preload="auto" loop="">
<source src="http://p2.music.126.net/pOH2QXwQc_7IX4l2sB-iSA==/7954966629620463.mp3" type="audio/mpeg">
</audio>
<a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);"></a>
</div>
<div style="display:none"><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a7c2021846b913ded755291087f1d0a1";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
</body></html>