diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..485dee6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/README.md b/README.md
index 26aa539..416f007 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,26 @@
-# Sponsor
-Reward page
+# Reward function
+一个打赏的小功能
+
+修改自 [donate-page](https://github.com/ihoey/Playing-reward)
+
+博客版本请查看 `hexo` 分支 [点击跳转](https://github.com/ihoey/Playing-reward/tree/hexo)
+
+#### 直接 `Fork`
+
+#### 修改 html 内链接地址
+
+#### 更换图片为你自己的打赏图片
+
+#### 使用 iframe 嵌入页面的代码，高度至少 240px，宽度至少 310px！
+
+```html
+
+```
+
+如果觉得还可以的话，请star一下！
+
+打赏一下的话就更好了~
+
+
+
+
diff --git a/images/AliPayQR.png b/images/AliPayQR.png
new file mode 100644
index 0000000..a300ffa
Binary files /dev/null and b/images/AliPayQR.png differ
diff --git a/images/QQPayQR.png b/images/QQPayQR.png
new file mode 100644
index 0000000..5c67e3d
Binary files /dev/null and b/images/QQPayQR.png differ
diff --git a/images/QQqianbao.png b/images/QQqianbao.png
new file mode 100644
index 0000000..acc5d92
Binary files /dev/null and b/images/QQqianbao.png differ
diff --git a/images/WeChatQR.png b/images/WeChatQR.png
new file mode 100644
index 0000000..0075099
Binary files /dev/null and b/images/WeChatQR.png differ
diff --git a/images/alipay.svg b/images/alipay.svg
new file mode 100644
index 0000000..2e78967
--- /dev/null
+++ b/images/alipay.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+]>
+
diff --git a/images/favicon.ico b/images/favicon.ico
new file mode 100644
index 0000000..c78243f
Binary files /dev/null and b/images/favicon.ico differ
diff --git a/images/github.svg b/images/github.svg
new file mode 100644
index 0000000..64e31fd
--- /dev/null
+++ b/images/github.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/images/like.svg b/images/like.svg
new file mode 100644
index 0000000..44adab3
--- /dev/null
+++ b/images/like.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/paypal.svg b/images/paypal.svg
new file mode 100644
index 0000000..7b7153e
--- /dev/null
+++ b/images/paypal.svg
@@ -0,0 +1,62 @@
+
+
\ No newline at end of file
diff --git a/images/wechat.svg b/images/wechat.svg
new file mode 100644
index 0000000..49e08d6
--- /dev/null
+++ b/images/wechat.svg
@@ -0,0 +1,54 @@
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..465f9e2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Sponsor
+
+
+
+
+
+
+
+
+ Sponsor
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ee4d16e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,32 @@
+const bd = document.querySelector('body')
+const qbox = bd.querySelector('#QRBox')
+const mbox = bd.querySelector('#MainBox')
+const dbox = bd.querySelector('#donateBox')
+
+const qqr = 'images/QQPayQR.png'
+const aqr = 'images/AliPayQR.png'
+const wqr = 'images/WeChatQR.png'
+
+const showQR = (QR) => {
+ if (QR) mbox.style.backgroundImage = `url(${ QR })`
+ bd.classList.add('blur')
+ qbox.classList.add('fadeIn')
+ mbox.classList.add('showQR')
+}
+
+dbox.addEventListener('click', (e) => {
+ let el = e.target
+ if (el.id === 'QQPay') showQR(qqr)
+ else if (el.id === 'AliPay') showQR(aqr)
+ else if (el.id === 'WeChat') showQR(wqr)
+})
+
+mbox.addEventListener('click', () => {
+ mbox.classList.remove('showQR')
+ mbox.classList.add('hideQR')
+ setTimeout(a => {
+ qbox.classList.remove('fadeIn')
+ mbox.classList.remove('hideQR')
+ bd.classList.remove('blur')
+ }, 600)
+})
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2aa52f9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,275 @@
+html,
+html>body {
+ margin: 0px;
+ padding: 0px;
+ 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 #DonateText,
+.blur #donateBox,
+.blur #github {
+ -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% - 105px);
+ top: calc(50% - 60px);
+ z-index: -1;
+ transform: rotatez(-15deg);
+}
+
+#donateBox {
+ left: calc(50% - 100px);
+ top: calc(50% - 15px);
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ width: 224px;
+ 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>#QQPay {
+ background-image: url(images/QQqianbao.png);
+ line-height: 28px;
+}
+
+#donateBox>#QQPay:hover {
+ overflow: visible;
+}
+
+#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% + 110px);
+ top: calc(50% - 30px);
+ background: no-repeat center center url(images/github.svg);
+ background-size: contain;
+ opacity: 0.3;
+ transform: rotatez(15deg);
+}
+
+#MainBox.showQR {
+ animation-name: showQR;
+ animation-duration: 3s;
+ animation-timing-function: ease-in-out;
+ animation-delay: 300ms;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+ -webkit-animation: showQR 3s ease-in-out 300ms 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);
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+#QRBox.fadeIn {
+ display: block;
+ animation: fadeIn 300ms;
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+#QRBox.fadeOut {
+ display: block;
+ animation: fadeOut 300ms;
+}