有趣的打赏功能




-

逛博客发现一个好玩的打赏功能

这个打赏功能挺有特色 动画不错 功能也不错 顺手给拔了 但感觉跟现用主题不太搭!






箭头标的地方滑动可以存三张打赏图。先收藏一下

代码如下:

div
id="donate">
p赏/p
img id="wechat_qr" src="//xxx1"
img id="qq_qr" src="//xxx2"
img id="alipay_qr" src="//xxx3"
/div

CSS:

/*打赏*/
#donate {
display: flex;
position: relative;
margin: 10px auto;
text-align: center;
height: 40px;
width: 40px;
color: #fff;
background-color: #88e1e8;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
transition: width .4s cubic-bezier(.6,1.2,.6,1.2),height .4s cubic-bezier(.6,1.2,.6,1.2);
transition-delay: .15s;
overflow-x: auto;
}

#donate:hover {
color: inherit;
background-color: #fff;
width: 150px;
height: 150px;
box-shadow: 0 15px 40px rgba(0,0,0,.1)
}

#donate:hover p {
display: none
}

#donate:hover img {
display: block
}

#donate p {
margin: auto;
color: #fff
}

#donate img {
display: none;
margin: 0
}
我要和博主讲道理