![图片[1]- 子比主题美化仿bilibili充电赞赏源码](https://www.dh139.cn/wp-content/uploads/2025/10/1-10.jpg)
代码教程:
将下面代码放置在需要展示的位置,例如文章页底部的版权声明位置
点击无反应或者无收款码?
请确认是否打开了 用户打赏功能,然后在前台用户中心—》打赏收款—》上传二维码
/* 文章充电开始 */
.log-power-pay {
display: flex;
background: var(--body-bg-color);
border-radius: var(--main-radius);
padding: 1.938rem;
position: relative;
align-items: center;
justify-content: space-between;
margin-top: 1.7rem;
}
[data-bs-theme=dark] .log-power-pay {
background: var(--body-bg-color);
}
.log-power-pay .left {
display: flex;
width: 50%;
flex-direction: column;
}
.log-power-pay .left .tip {
font-weight: 500;
margin-bottom: 6px;
}
.log-power-pay .left .count {
font-size: 1.213rem;
font-weight: 400;
margin-bottom: 6px;
color: var(--muted-color);
}
.log-power-pay .left .users ul {
display: flex;
align-items: center;
flex-wrap: wrap;
max-height: 120px;
overflow: auto;
}
.log-power-pay .left .users li {
margin: 3px;
}
.log-power-pay .left .users li img {
width: 35px;
height: 35px;
object-fit: cover;
border-radius: var(--slim-radius);
}
.log-power-pay .right {
height: 85px;
position: relative;
align-items: center;
display: flex;
gap: 6px;
}
.log-power-pay .right .main-btn {
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
color: #ffffff;
padding: calc(1.938rem - 5px);
width: fit-content;
height: 45px;
background-color: #ff6699;
box-shadow: 0 4px 4px rgb(255 102 153 / 30%);
border-radius: var(--main-radius);
cursor: pointer;
}
.log-power-pay .right .main-btn i {
font-size: 1.7rem;
}
.log-power-pay .right .animate {
position: relative;
width: 150px;
height: 55px;
overflow: hidden;
}
.log-power-pay .right svg {
width: 100%;
height: 100%;
fill: none;
}
.log-power-pay .right .mask {
width: 0;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
transition: all 0.8s;
}
.log-power-pay .right .mask svg {
width: 150px;
height: 55px;
}
.log-power-pay .right .orange-mask {
width: 18px;
height: 100%;
overflow: hidden;
position: absolute;
left: -20px;
top: 0;
}
.log-power-pay .right .orange-mask svg {
position: absolute;
top: 0;
left: 20px;
width: 150px;
height: 55px;
}
.log-power-pay .right .main-btn:hover + .animate .mask {
width: 150px;
}
.log-power-pay .right .main-btn:hover + .animate .orange-mask {
animation: donate-move 0.8s linear 0.4s infinite;
}
.log-power-pay .right .main-btn:hover + .animate .orange-mask svg {
animation: donate-move-second 0.8s linear 0.4s infinite;
}
.log-power-pay .right .count {
position: absolute;
right: 10px;
top: 20px;
font-size: 1.15rem;
color: var(--muted-color);
}
@keyframes donate-move {
0% {
left: -15px;
}
100% {
left: 140px;
}
}
@keyframes donate-move-second {
0% {
left: 15px;
}
100% {
left: -140px;
}
}
@media (max-width: 767px) {
.log-power-pay {
flex-direction:column;
}
.log-power-pay .left {
width: 100%;
}
.log-power-pay .right {
position: absolute;
right: 1.938rem;
top: 1.938rem;
height: auto;
}
.log-power-pay .right .animate {
display: none;
}
.log-power-pay .right .main-btn {
height: 35px;
padding: calc(1.938rem - 10px);
}
}
$(document).ajaxComplete(function(event, xhr, settings) {
// 当所有的 AJAX 请求完成时执行以下代码
$('.modal-dialog').each(function() {
// 遍历每个加载的模拟框
$(this).prepend('<span style="position: absolute;bottom: -35px;z-index: 99;left: 0;right: 0;text-align: center;color: #efefef;user-select: none;pointer-events: none;">点击任意地方关闭</span>');
});});
© 会员中心
点点赞赏,手留余香~
还没有人给TA充电
给TA充电














暂无评论内容