JS模块化改造&看板娘正式全站应用

This commit is contained in:
结发受长生
2018-05-27 02:33:17 +08:00
parent 9230ec5aac
commit d101a69a3b
19 changed files with 2692 additions and 10847 deletions
+1 -83
View File
@@ -1,89 +1,7 @@
<%- page.content %>
<style>
.waifu {position: fixed;bottom: 0;left: 0;z-index: 1;font-size: 0;transition: all .3s ease-in-out;-webkit-transform: translateY(3px);transform: translateY(3px);}
.waifu:hover {-webkit-transform: translateY(0);transform: translateY(0);}
@media (max-width: 768px) {.waifu { display: none;}}
.waifu-tips {
opacity: 0;
width: 250px;
height: 70px;
margin: -20px 20px;
padding: 5px 10px;
border: 1px solid rgba(224, 186, 140, 0.62);
border-radius: 12px;
background-color: rgba(236, 217, 188, 0.5);
box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
position: absolute;
animation-delay: 5s;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-name: shake;
animation-timing-function: ease-in-out;
}
.waifu #live2d{ position: relative;}
@keyframes shake {
2% { transform: translate(0.5px, -1.5px) rotate(-0.5deg);}
4% { transform: translate(0.5px, 1.5px) rotate(1.5deg);}
6% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}
8% { transform: translate(2.5px, 1.5px) rotate(0.5deg);}
10% { transform: translate(0.5px, 2.5px) rotate(0.5deg);}
12% { transform: translate(1.5px, 1.5px) rotate(0.5deg);}
14% { transform: translate(0.5px, 0.5px) rotate(0.5deg);}
16% { transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
18% { transform: translate(0.5px, 0.5px) rotate(1.5deg);}
20% { transform: translate(2.5px, 2.5px) rotate(1.5deg);}
22% { transform: translate(0.5px, -1.5px) rotate(1.5deg);}
24% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg);}
26% { transform: translate(1.5px, 0.5px) rotate(1.5deg);}
28% { transform: translate(-0.5px, -0.5px) rotate(-0.5deg);}
30% { transform: translate(1.5px, -0.5px) rotate(-0.5deg);}
32% { transform: translate(2.5px, -1.5px) rotate(1.5deg);}
34% { transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
36% { transform: translate(0.5px, -1.5px) rotate(0.5deg);}
38% { transform: translate(2.5px, -0.5px) rotate(-0.5deg);}
40% { transform: translate(-0.5px, 2.5px) rotate(0.5deg);}
42% { transform: translate(-1.5px, 2.5px) rotate(0.5deg);}
44% { transform: translate(-1.5px, 1.5px) rotate(0.5deg);}
46% { transform: translate(1.5px, -0.5px) rotate(-0.5deg);}
48% { transform: translate(2.5px, -0.5px) rotate(0.5deg);}
50% { transform: translate(-1.5px, 1.5px) rotate(0.5deg);}
52% { transform: translate(-0.5px, 1.5px) rotate(0.5deg);}
54% { transform: translate(-1.5px, 1.5px) rotate(0.5deg);}
56% { transform: translate(0.5px, 2.5px) rotate(1.5deg);}
58% { transform: translate(2.5px, 2.5px) rotate(0.5deg);}
60% { transform: translate(2.5px, -1.5px) rotate(1.5deg);}
62% { transform: translate(-1.5px, 0.5px) rotate(1.5deg);}
64% { transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
66% { transform: translate(0.5px, 2.5px) rotate(1.5deg);}
68% { transform: translate(2.5px, -1.5px) rotate(1.5deg);}
70% { transform: translate(2.5px, 2.5px) rotate(0.5deg);}
72% { transform: translate(-0.5px, -1.5px) rotate(1.5deg);}
74% { transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
76% { transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
78% { transform: translate(-1.5px, 2.5px) rotate(0.5deg);}
80% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg);}
82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg);}
84% { transform: translate(-0.5px, 0.5px) rotate(1.5deg);}
86% { transform: translate(2.5px, 1.5px) rotate(0.5deg);}
88% { transform: translate(-1.5px, 0.5px) rotate(1.5deg);}
90% { transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}
92% { transform: translate(-1.5px, -1.5px) rotate(1.5deg);}
94% { transform: translate(0.5px, 0.5px) rotate(-0.5deg);}
96% { transform: translate(2.5px, -0.5px) rotate(-0.5deg);}
98% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg);}
0%, 100% { transform: translate(0, 0) rotate(0);}
}
</style>
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>
<%- js('js/lib/jquery-3.3.1.min') %>
<%- js('js/lib/live2d') %>
<%- js('js/tips') %>
@@ -1,5 +0,0 @@
<%- js('js/main') %>
<%- js('js/lib/polyfill.min') %>
<%- js('js/lib/vue.min') %>
<%- js('js/lib/axios.min') %>
<%- js('js/local-search') %>
@@ -5,7 +5,9 @@
<% } else { %>
2016-<%- new Date().getFullYear() %>
<% } %>
<a href="<%- url_for() %>">Power By Hexo</a>
</footer>
<div class="back-to-top" id="JELON__backToTop" title="返回顶部">返回顶部</div>
<script src="<%=config.root %>js/lib/require.min.js" defer async="true"
data-main="<%=config.root %>js/main.js"></script>
+24 -24
View File
@@ -1,29 +1,29 @@
<%- partial('_partial/head') %>
<body class="home">
<!--[if lt IE 9]>
<div class="browsehappy">
当前网页 <strong>不支持</strong>
你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>.
</div>
<![endif]-->
<!--[if lt IE 9]>
<div class="browsehappy">
当前网页 <strong>不支持</strong>
你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>.
</div>
<![endif]-->
<!-- 博客头部 -->
<%- partial('_partial/header') %>
<!-- 博客正文 -->
<div class="container body clearfix">
<section class="content">
<div class="content-main widget">
<%- body %>
</div>
</section>
<%- partial('_partial/sidebar') %>
</div>
<!-- 博客底部 -->
<%- partial('_partial/footer') %>
<!--博客js脚本 -->
<%- partial('_partial/after-footer') %>
<!-- 博客头部 -->
<%- partial('_partial/header') %>
<!-- 看板娘 -->
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>
<!-- 博客正文 -->
<div class="container body clearfix">
<section class="content">
<div class="content-main widget">
<%- body %>
</div>
</section>
<%- partial('_partial/sidebar') %>
</div>
<!-- 博客底部 -->
<%- partial('_partial/footer') %>
</body>
</html>