sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

看板娘

Browse Source
This commit is contained in:
结发受长生
2018-05-24 17:40:14 +08:00
parent 9fde270ea6
commit 4d93233f66
41 changed files with 13763 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/hexo-theme-xups/layout/_custom/lab.ejs
+89
View File
@@ -0,0 +1,89 @@
<%- 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') %>