367 lines
6.9 KiB
HTML
Executable File
367 lines
6.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<style>
|
|
html,
|
|
html>body {
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: "Helvetica Neue", Ubuntu, "WenQuanYi Micro Hei", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
line-height: 1.8em;
|
|
text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
|
|
background: #fff;
|
|
}
|
|
|
|
img {
|
|
border-width: 0px;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
text-decoration: none;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.list,
|
|
.list li,
|
|
.list-left li {
|
|
list-style: none;
|
|
list-style-type: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.pos-f {
|
|
position: fixed;
|
|
}
|
|
|
|
.left-100 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.blur {
|
|
-webkit-filter: blur(3px);
|
|
filter: blur(3px);
|
|
}
|
|
|
|
.tr3 {
|
|
transition: all .3s;
|
|
}
|
|
|
|
#DonateText {
|
|
position: fixed;
|
|
font-size: 12px;
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
color: #fff;
|
|
background: #ffd886 url(images/like.svg) no-repeat center 10px;
|
|
background-size: 20px;
|
|
border-radius: 35px;
|
|
text-align: center;
|
|
left: calc(50% - 120px);
|
|
top: calc(50% - 60px);
|
|
z-index: -1;
|
|
transform: rotatez(-15deg);
|
|
}
|
|
|
|
#donateBox {
|
|
left: calc(50% - 90px);
|
|
top: calc(50% - 15px);
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
width: 150px;
|
|
height: 28px;
|
|
float: left;
|
|
z-index: 1;
|
|
}
|
|
|
|
#donateBox li {
|
|
width: 74px;
|
|
float: left;
|
|
text-align: center;
|
|
border-left: 1px solid #ddd;
|
|
background: no-repeat center center;
|
|
background-color: rgba(204, 217, 220, 0.1);
|
|
background-size: 45px;
|
|
transition: all .3s;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
line-height: 600px;
|
|
height: 28px;
|
|
-webkit-filter: grayscale(1);
|
|
filter: grayscale(1);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#donateBox li:hover {
|
|
background-color: rgba(204, 217, 220, 0.3);
|
|
-webkit-filter: grayscale(0);
|
|
filter: grayscale(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
#donateBox>li:first-child {
|
|
border-width: 0;
|
|
}
|
|
|
|
#donateBox a {
|
|
display: block;
|
|
}
|
|
|
|
#donateBox #AliPay {
|
|
background-image: url(images/alipay.svg);
|
|
}
|
|
|
|
#donateBox #WeChat {
|
|
background-image: url(images/wechat.svg);
|
|
}
|
|
|
|
#QRBox {
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
display: none;
|
|
perspective: 400px;
|
|
}
|
|
|
|
#MainBox {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 200px;
|
|
height: 200px;
|
|
left: calc(50% - 100px);
|
|
top: calc(50% - 100px);
|
|
background: #fff no-repeat center center;
|
|
background-size: 190px;
|
|
border-radius: 6px;
|
|
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
|
|
opacity: 0;
|
|
transition: all 1s ease-in-out;
|
|
transform-style: preserve-3d;
|
|
transform-origin: center center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#github {
|
|
width: 24px;
|
|
height: 24px;
|
|
left: calc(50% + 50px);
|
|
top: calc(50% - 30px);
|
|
background: no-repeat center center url(images/github.svg);
|
|
background-size: contain;
|
|
opacity: 0.3;
|
|
transform: rotatez(15deg);
|
|
}
|
|
|
|
[data-footnote] {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-footnote]:hover {
|
|
overflow: visible;
|
|
}
|
|
|
|
[data-footnote]::before,
|
|
[data-footnote]::after {
|
|
position: absolute;
|
|
transition: all .3s;
|
|
transform: translate3d(-50%, 0, 0);
|
|
opacity: 0;
|
|
left: 37px;
|
|
z-index: 10;
|
|
}
|
|
|
|
[data-footnote]::before {
|
|
content: attr(data-footnote);
|
|
border-radius: 6px;
|
|
background-color: rgba(100, 100, 100, 0.8);
|
|
color: #fff;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
padding: 0 6px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
top: -24px;
|
|
left: 37px;
|
|
}
|
|
|
|
[data-footnote]::after {
|
|
content: '';
|
|
border: 5px solid #333;
|
|
border-color: rgba(100, 100, 100, 0.8) transparent transparent transparent;
|
|
top: 0;
|
|
left: 37px;
|
|
}
|
|
|
|
[data-footnote]:hover::before,
|
|
[data-footnote]:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-footnote]:hover::before,
|
|
[data-footnote]:hover::after {
|
|
transform: translate3d(-50%, -7px, 0);
|
|
}
|
|
|
|
#MainBox.showQR {
|
|
opacity: 1;
|
|
animation-name: showQR;
|
|
animation-duration: 3s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
-webkit-animation: showQR 3s ease-in-out 0s 1 normal forwards;
|
|
}
|
|
|
|
@keyframes showQR {
|
|
from {
|
|
transform: rotateX(90deg);
|
|
}
|
|
|
|
8% {
|
|
opacity: 1;
|
|
transform: rotateX(-60deg);
|
|
}
|
|
|
|
18% {
|
|
opacity: 1;
|
|
transform: rotateX(40deg);
|
|
}
|
|
|
|
34% {
|
|
opacity: 1;
|
|
transform: rotateX(-28deg);
|
|
}
|
|
|
|
44% {
|
|
opacity: 1;
|
|
transform: rotateX(18deg);
|
|
}
|
|
|
|
58% {
|
|
opacity: 1;
|
|
transform: rotateX(-12deg);
|
|
}
|
|
|
|
72% {
|
|
opacity: 1;
|
|
transform: rotateX(9deg);
|
|
}
|
|
|
|
88% {
|
|
opacity: 1;
|
|
transform: rotateX(-5deg);
|
|
}
|
|
|
|
96% {
|
|
opacity: 1;
|
|
transform: rotateX(2deg);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#MainBox.hideQR {
|
|
opacity: 1;
|
|
animation-name: hideQR;
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
-webkit-animation: hideQR 0.5s ease-in-out 0s 1 normal forwards;
|
|
}
|
|
|
|
@keyframes hideQR {
|
|
from {}
|
|
|
|
20%,
|
|
50% {
|
|
transform: scale(1.08, 1.08);
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: rotateZ(40deg) scale(0.6, 0.6);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Sponsor-打赏作者-简单图床 EasyImage2.0</title>
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
|
<!--禁止缩放-->
|
|
</head>
|
|
|
|
<body>
|
|
<a id="github" href="https://img.545141.com/" target="_blank" class="pos-f tr3" title="EasyImages 简单图床"></a>
|
|
<div id="DonateText" class="tr3">打赏作者</div>
|
|
<ul id="donateBox" class="list pos-f tr3">
|
|
<li id="AliPay">AliPay</li>
|
|
<li id="WeChat">WeChat</li>
|
|
</ul>
|
|
<div id="QRBox" class="pos-f left-100">
|
|
<div id="MainBox"></div>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/icret/EasyImages2.0@2.2.0/public/static/zui/lib/jquery/jquery-3.4.1.min.js">
|
|
</script>
|
|
<script>
|
|
jQuery(document).ready(function () {
|
|
var QRBox = $('#QRBox');
|
|
var MainBox = $('#MainBox');
|
|
var AliPayQR = './images/alipay.jpg';
|
|
var WeChanQR = './images/wechat.jpg';
|
|
|
|
|
|
|
|
function showQR(QR) {
|
|
if (QR) {
|
|
MainBox.css('background-image', 'url(' + QR + ')');
|
|
}
|
|
$('#DonateText,#donateBox,#github').addClass('blur');
|
|
QRBox.fadeIn(300, function (argument) {
|
|
MainBox.addClass('showQR');
|
|
});
|
|
}
|
|
|
|
$('#donateBox>li').click(function (event) {
|
|
var thisID = $(this).attr('id');
|
|
if (thisID === 'AliPay') {
|
|
showQR(AliPayQR);
|
|
} else if (thisID === 'WeChat') {
|
|
showQR(WeChanQR);
|
|
}
|
|
});
|
|
|
|
MainBox.click(function (event) {
|
|
MainBox.removeClass('showQR').addClass('hideQR');
|
|
setTimeout(function (a) {
|
|
QRBox.fadeOut(300, function (argument) {
|
|
MainBox.removeClass('hideQR');
|
|
});
|
|
$('#DonateText,#donateBox,#github').removeClass('blur');
|
|
}, 600);
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</html> |