impress.js高级特效展示 适用于个人介绍 超级酷炫,js支持键盘方向控制的引导页面模板
打开源代码直接在源代码中更改文字即可,十分简单
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset=utf-8 "utf-8"/>
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv=refresh content= />
<title>关于我 |Dreamer</title>
<meta name="author" content="tim" />
<script data-pagespeed-no-defer>
function fresh()
{
if(location.href.indexOf("?reload=true")<0)
{
location.href+="?reload=true";
}
}
setTimeout("fresh()",50)
(function() {
function d(b) {
var a = window;
if(a.addEventListener) a.addEventListener("load", b, !1);
else if(a.attachEvent) a.attachEvent("onload", b);
else {
var c = a.onload;
a.onload = function() {
b.call(this);
c && c.call(this)
}
}
}
var p = Date.now || function() {
return +new Date
};
window.pagespeed = window.pagespeed || {};
var q = window.pagespeed;
function r() {
this.a = !0
}
r.prototype.c = function(b) {
b = parseInt(b.substring(0, b.indexOf(" ")), 10);
return !isNaN(b) && b <= p()
};
r.prototype.hasExpired = r.prototype.c;
r.prototype.b = function(b) {
return b.substring(b.indexOf(" ", b.indexOf(" ") + 1) + 1)
};
r.prototype.getData = r.prototype.b;
r.prototype.f = function(b) {
var a = document.getElementsByTagName("script"),
a = a[a.length - 1];
a.parentNode.replaceChild(b, a)
};
r.prototype.replaceLastScript = r.prototype.f;
r.prototype.g = function(b) {
var a = window.localStorage.getItem("pagespeed_lsc_url:" + b),
c = document.createElement(a ? "style" : "link");
a && !this.c(a) ? (c.type = "text/css", c.appendChild(document.createTextNode(this.b(a)))) : (c.rel = "stylesheet", c.href = b, this.a = !0);
this.f(c)
};
r.prototype.inlineCss = r.prototype.g;
r.prototype.h = function(b, a) {
var c = window.localStorage.getItem("pagespeed_lsc_url:" + b + " pagespeed_lsc_hash:" + a),
f = document.createElement("img");
c && !this.c(c) ? f.src = this.b(c) : (f.src = b, this.a = !0);
for(var c = 2, k = arguments.length; c < k; ++c) {
var g = arguments[c].indexOf("=");
f.setAttribute(arguments[c].substring(0, g), arguments[c].substring(g + 1))
}
this.f(f)
};
r.prototype.inlineImg = r.prototype.h;
function t(b, a, c, f) {
a = document.getElementsByTagName(a);
for(var k = 0, g = a.length; k < g; ++k) {
var e = a[k],
m = e.getAttribute("data-pagespeed-lsc-hash"),
h = e.getAttribute("data-pagespeed-lsc-url");
if(m && h) {
h = "pagespeed_lsc_url:" + h;
c && (h += " pagespeed_lsc_hash:" + m);
var l = e.getAttribute("data-pagespeed-lsc-expiry"),
l = l ? (new Date(l)).getTime() : "",
e = f(e);
if(!e) {
var n = window.localStorage.getItem(h);
n && (e = b.b(n))
}
e && (window.localStorage.setItem(h, l + " " + m + " " + e), b.a = !0)
}
}
}
function u(b) {
t(b, "img", !0, function(a) {
return a.src
});
t(b, "style", !1, function(a) {
return a.firstChild ? a.firstChild.nodeValue : null
})
}
q.i = function() {
if(window.localStorage) {
var b = new r;
q.localStorageCache = b;
d(function() {
u(b)
});
d(function() {
if(b.a) {
for(var a = [], c = [], f = 0, k = p(), g = 0, e = window.localStorage.length; g < e; ++g) {
var m = window.localStorage.key(g);
if(!m.indexOf("pagespeed_lsc_url:")) {
var h = window.localStorage.getItem(m),
l = h.indexOf(" "),
n = parseInt(h.substring(0, l), 10);
if(!isNaN(n))
if(n <= k) {
a.push(m);
continue
} else if(n < f || 0 == f) f = n;
c.push(h.substring(l + 1, h.indexOf(" ", l + 1)))
}
}
k = "";
f && (k = "; expires=" + (new Date(f)).toUTCString());
document.cookie = "_GPSLSC=" + c.join("!") + k;
g = 0;
for(e = a.length; g < e; ++g) window.localStorage.removeItem(a[g]);
b.a = !1
}
})
}
};
q.localStorageCacheInit = q.i;
})();
pagespeed.localStorageCacheInit();
</script>
<link href="css/A.info.css+fonts.css,Mcc.3oeLZa5OjE.css.pagespeed.cf.eMOlhcLhLT.css" rel="stylesheet" />
<link rel="shortcut icon" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<base target="_blank">
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>您的浏览器 <b>不支持</b> impress.js的展示要求, 将为您呈现简化版的展示</p>
<p>为了获取最佳效果,请使用最新版的<b>Chrome</b>, <b>Safari</b> 或 <b>Firefox</b> 浏览器</p>
<p>请使用电脑端食用,效果更佳,记得摇一摇哟!</p>
</div>
<div id="impress">
<div id="welcome" class="step" data-x="-2000" data-y="-2500">
<p>欢迎来到</p>
<p><span class="title"><b>Dreamer</b></span></p>
<p><span class="footnote"><sup>*</sup>我叫<span class="name"> GaoWei</span>,下面是关于我的一些介绍</span>
</p>
</div>
<div id="me" class="step" data-x="0" data-y="-2500">
<b class="now_me">现在的我:</b>
<ul>
<li><b class="ios">一名大三理工男</b></li>
<li><b class="unity">未来的职业程序猿一名</b></li>
<li><b class="ios">业余 前端 开发者</b></li>
<li><b class="photo">业余建站爱好者</b></li>
</ul>
</div>
<div id="whereiam" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="3">
<p>生于<span class="kunming">安徽</span></p>
<p><span class="born">一个不起眼的小农村</span></p>
<p>就读<span class="tsinghua">桂林理工</span></p>
<p><span class="study">麻雀虽小五脏俱全</span></p>
</div>
<div id="guilin" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="4">
<p>现就读于<b class="trans">桂林</b>
<p>
<p>努力学习本专业<sup>*</sup>的同时,也在不断学习新的东西<sup>**</sup></p>
<p><span class="footnote">* 其实就是玩手机,** 然后就是发呆</span></p>
</div>
<div id="world" class="step" data-x="-100" data-y="2900" data-z="900" data-rotate="-90" data-scale="5">
<p>有时候会觉得,世界真的很小</p>
</div>
<div id="meet" class="step" data-x="1300" data-y="6000" data-z="2400" data-scale="6">
<p>也许我们就在某时某地</p>
<p>曾经擦肩而过</p>
<p>而你我,却浑然不觉</p>
</div>
<div id="tiny" class="step" data-x="1300" data-y="6000" data-z="-3000" data-rotate="300" data-scale="1">
<p>但是</p>
</div>
<div id="comein" class="step" data-x="0" data-y="7000" data-z="-3000" data-rotate="300">
<p>从此刻开始,从您踏入
<a href="http://www.aoeiun.cn/">Dreamer</a>开始</p>
<p>我们的生活便有了<b>交集</b></p>
</div>
<div id="mywords" class="step" data-x="4500" data-y="3500" data-z="3000" data-rotate="160">
<p>也许您在这里能看到的只是</p>
<p>中国千千万万理工男之中最普通的一员</p>
<p>所写下的最蹩足的文字</p>
</div>
<div id="grow" class="step" data-x="3500" data-y="-850" data-z="3000" data-rotate="270" data-scale="6">
<p>但我相信它们真实地记载了</p>
<p><b>我的生活,我的成长</b></p>
</div>
<div id="knowme" class="step" data-x="-6000" data-y="-800" data-z="0" data-rotate="0" data-scale="1">
<p>正如</p>
<p>伯乐得见绝世好马,子期终遇伯牙佳音</p>
</div>
<div id="prizeme" class="step" data-x="-6000" data-y="-500" data-z="-500" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="horse">良驹美景,</span> <span class="moutain">高山流水,</span> <span class="hope">我真心希望</span> <span class="youare">您就是</span> <span class="my">我的伯乐,我的子期</span> <b></p>
</div>
<div id="findme" class="step" data-x="-6000" data-y="1000" data-scale="4">
<p>您可以在<a href="http://weibo.com/u/5189035926?is_all=1">新浪微博</a>,<a href="#"> Twitter</a> 或者<a href="">Github</a>上找到我</p>
<q>也可以逛一逛这个<a href="http://www.aoeiun.cn/">网站</a>,这里有一些你需要的东西</q>
</div>
<div id="subcribe" class="step" data-x="-6000" data-y="3100" data-rotate="180" data-scale="4">
<p>如果您有兴趣持续关注本站,可以将本站加入收藏夹</p>
<p>当然也欢迎您通过<a href="http://www.aoeiun.cn/">主页</a>访问本站。</p>
<p><span class="adv">这样<del>我就可以光明正大地给您推送我的分享了</del>您就可以第一时间看到本站的新文章了</span></p>
</div>
<div id="one-more-thing" class="step" data-x="-1500" data-y="-1100" data-z="0" data-scale="2">
<p>One More Thing</p>
<p>其实是一句话,想分享给您</p>
</div>
<div id="motto" class="step" data-x="0" data-y="1500" data-z="6000" data-scale="5">
<p>不论您走到哪儿,在做什么</p>
<p>都请铭记在心 请记住</p>
<p><b>勿忘初心,方得始终</b></p>
</div>
<div id="back" class="step" data-x="-6000" data-y="5200" data-scale="2">
<p>谢谢您的来访</p>
<p>点击
<a href="http://www.aoeiun.cn/">这里</a>返回Dreamer</p>
</div>
<div id="overview" class="step" data-x="0" data-y="2500" data-scale="16">
</div>
</div>
<div class="hint">
<p>使用空格或方向键继续</p>
</div>
<script>
if("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>在左侧或右侧点击继续</p>";
}
</script>
<script src="js/impress.js.pagespeed.jm.J1W2agOVUy.js"></script>
<script>
impress().init();
</script>
</body>
</html>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791