blog/themes/typing/source/css/donate.css

@keyframes showQR{0%{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}}@keyframes hideQR{20%,50%{transform:scale(1.08,1.08);opacity:1}to{opacity:0;transform:rotateZ(40deg) scale(.6,.6)}}#donate{font-weight:900;line-height:1.8em;text-shadow:0 0 1px rgba(255,255,255,.1);display:block;position:relative;margin:70px 0 0;padding:0}#donate img{border-width:0}#donate a{color:#000;text-decoration:none;outline:0;border:0}#donate .list,#donate .list li,#donate .list-left li{list-style:none;list-style-type:none;margin:0;padding:0}#DonateText,#donate .pos-f{position:absolute}#donate .left-100{width:100%;height:100%}#donate .blur{-webkit-filter:blur(3px);filter:blur(3px)}#donate .tr3,#donateBox li{transition:all .3s}#DonateText{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% - 150px);top:calc(50% - 15px);background-color:#fff;border:1px solid #ddd;border-radius:6px;width:299px;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,.1);background-size:45px;cursor:pointer;overflow:hidden;line-height:600px;height:28px;-webkit-filter:grayscale(1);filter:grayscale(1);opacity:.5}#donateBox li:hover{background-color:rgba(204,217,220,.3);-webkit-filter:grayscale(0);filter:grayscale(0);opacity:1}#donateBox>li:first-child{border-width:0}#donateBox a{display:block}#donateBox #PayPal{background-image:url(../images/paypal.svg)}#donateBox>#BTC{background-image:url(../images/bitcoin.svg);line-height:28px}#donate [data-footnote]:hover,#donateBox>#BTC:hover{overflow:visible}#BTC>button,#donate .MainBox{opacity:0;cursor:pointer}#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,.3);display:none;perspective:400px}#donate .MainBox{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:0 2px 7px rgba(0,0,0,.3);transition:all 1s ease-in-out;transform-style:preserve-3d;transform-origin:center center;overflow:hidden}#donate #btc-key{opacity:0;width:2px;height:8px;overflow:hidden;left:-2px;top:-8px}#donate #github{width:24px;height:24px;left:calc(50% + 135px);top:calc(50% - 30px);background:no-repeat center center url(../images/github.svg);background-size:contain;opacity:.3;transform:rotatez(15deg)}#donate [data-footnote]{position:relative;overflow:hidden}#donate [data-footnote]::after,#donate [data-footnote]::before{position:absolute;transition:all .3s;transform:translate3d(-50%,0,0);opacity:0;z-index:10}#donate [data-footnote]::before{content:attr(data-footnote);border-radius:6px;background-color:rgba(100,100,100,.8);color:#fff;height:24px;line-height:24px;padding:0 6px;font-size:12px;white-space:nowrap;top:-24px;left:37px}#donate [data-footnote]::after{content:'';border:5px solid #333;border-color:rgba(100,100,100,.8) transparent transparent;top:0;left:37px}#donate [data-footnote]:hover::after,#donate [data-footnote]:hover::before{opacity:1;transform:translate3d(-50%,-7px,0)}#donate .MainBox.hideQR,#donate .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}#donate .MainBox.hideQR{animation-name:hideQR;animation-duration:.5s;-webkit-animation:hideQR .5s ease-in-out 0s 1 normal forwards}