子比主题美化充电赞赏源码

子比主题美化充电赞赏源码- 花猪资源网
子比主题美化充电赞赏源码
此内容为免费阅读,请登录后查看
0
免费阅读
图片[1]- 子比主题美化仿bilibili充电赞赏源码

代码教程:
将下面代码放置在需要展示的位置,例如文章页底部的版权声明位置

点击无反应或者无收款码?
请确认是否打开了 用户打赏功能,然后在前台用户中心—》打赏收款—》上传二维码

/* 文章充电开始 */
.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>');
   });});
© 会员中心
© 版权声明
喜欢就支持一下吧
点赞15赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容