看板娘
This commit is contained in:
@@ -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') %>
|
||||
@@ -1,5 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<!--
|
||||
..
|
||||
.' @`._
|
||||
~ ...._.' ,__.-;
|
||||
_..------/` .-' ~
|
||||
: __./' , .'-'--.._
|
||||
~ `---(.-'''---. \`._ `. ~
|
||||
_.--'( .______.'.-' `-.` `.
|
||||
: `-..____`-. ;
|
||||
`. ```` 稻花香里说丰年, ; ~
|
||||
`-.__ 听取人生经验。 __.-'
|
||||
````-----.......-----''' ~
|
||||
~ ~
|
||||
-->
|
||||
<head>
|
||||
<meta charset="UTF-8" >
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" >
|
||||
|
||||
@@ -4,10 +4,8 @@
|
||||
<h4 class="post-title"><a href="javascript: void(0);"><%- page.title %></a></h4>
|
||||
</header>
|
||||
<div class="post-content">
|
||||
<% if (page.pageid && page.pageid == 'about') { %>
|
||||
<%- partial('_custom/about', { page: page, post: page }) %>
|
||||
<% } else if (page.pageid && page.pageid == 'lab') { %>
|
||||
<%- partial('_custom/lab', { page: page, post: page }) %>
|
||||
<% if (page.pageid) { %>
|
||||
<%- partial('_custom/' + page.pageid, { page: page, post: page }) %>
|
||||
<% } else { %>
|
||||
<%- page.content %>
|
||||
<% } %>
|
||||
|
||||
Reference in New Issue
Block a user