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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
themes/hexo-theme-xups/source/css/_partial/banner.styl
+92
View File
@@ -0,0 +1,92 @@
.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
transition : opacity 0.3s ease-in;
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) }