子比主题美化 – 文章底部版权提示样式

花钱在墨星博客买的 想要的自己拿去用

效果图

教程开始

进入wordpress后台-子比主题设置-文章列表–文章页面-版权声明，里面替换为下面的代码

<style>
    :root {
        --cc-bg-color: #ffffff;
        --cc-text-color: #4a5568;
        --cc-border-color: rgba(231, 234, 243, 0.7);
        --cc-hover-bg: rgba(71, 118, 230, 0.03);
        --cc-hover-border: rgba(71, 118, 230, 0.09);
        --cc-highlight-color: #4776e6;
        --cc-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
        --cc-title-gradient: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
    }

    .dark-theme {
        --cc-bg-color: #1a1b1e;
        --cc-text-color: #e4e6eb;
        --cc-border-color: rgba(255, 255, 255, 0.1);
        --cc-hover-bg: rgba(71, 118, 230, 0.1);
        --cc-hover-border: rgba(71, 118, 230, 0.2);
        --cc-highlight-color: #6d95f0;
        --cc-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        --cc-title-gradient: linear-gradient(135deg, #5d8bf4 0%, #a875ff 100%);
    }

    .copyright-container {
        max-width: 800px;
        margin: 12px auto;
        font-family: 'Microsoft YaHei', sans-serif;
    }

    .copyright-box {
        background: var(--cc-bg-color);
        border-radius: 12px;
        padding: 15px 20px;
        box-shadow: var(--cc-card-shadow);
        position: relative;
        border: 1px solid var(--cc-border-color);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .copyright-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(71, 118, 230, 0.08);
    }

    .copyright-title {
        background: var(--cc-title-gradient);
        color: white;
        padding: 6px 20px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
        position: absolute;
        top: -13px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 2px 8px rgba(71, 118, 230, 0.15);
        letter-spacing: 1px;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
    }

    .copyright-title::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 20px;
        background: var(--cc-title-gradient);
        opacity: 0.1;
        z-index: -1;
    }

    .copyright-item {
        display: flex;
        align-items: flex-start;
        margin: 6px 0;
        padding: 4px 8px;
        transition: all 0.3s ease;
        border-radius: 6px;
        border: 1px solid transparent;
        position: relative;
        overflow: hidden;
    }

    .copyright-item:hover {
        background: var(--cc-hover-bg);
        border: 1px solid var(--cc-hover-border);
        transform: translateX(3px);
    }

    .copyright-item:hover .item-number {
        transform: scale(1.1);
    }

    .item-number {
        background: var(--cc-title-gradient);
        color: white;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        font-size: 11px;
        flex-shrink: 0;
        margin-top: 1px;
        transition: transform 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .item-number::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: rotate(45deg);
        transition: 0.6s;
        opacity: 0;
    }

    .copyright-item:hover .item-number::after {
        opacity: 1;
        left: 100%;
    }

    .item-content {
        color: var(--cc-text-color);
        line-height: 1.4;
        font-size: 13px;
        transition: color 0.3s ease;
    }

    .highlight {
        color: var(--cc-highlight-color);
        font-weight: bold;
        padding: 0 1px;
        position: relative;
        transition: all 0.3s ease;
    }

    .highlight::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--cc-highlight-color);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        transform-origin: right;
        opacity: 0.5;
    }

    .copyright-item:hover .highlight::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    @media (max-width: 768px) {
        .copyright-box {
            margin: 0;
            padding: 12px 15px;
        }

        .copyright-item {
            padding: 4px 6px;
        }
    }
</style>

<div class="copyright-box">
    <div class="copyright-title">版权声明</div>
    <div style="margin-top: 12px">
        <div class="copyright-item">
            <div class="item-number">1</div>
            <div class="item-content">本站名称：<span class="highlight">墨星博客</span></div>
        </div>
        <div class="copyright-item">
            <div class="item-number">2</div>
            <div class="item-content">本站网址：<span class="highlight">moxingbk.com</span></div>
        </div>
        <div class="copyright-item">
            <div class="item-number">3</div>
            <div class="item-content">本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。</div>
        </div>
        <div class="copyright-item">
            <div class="item-number">4</div>
            <div class="item-content">本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。</div>
        </div>
        <div class="copyright-item">
            <div class="item-number">5</div>
            <div class="item-content">本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。</div>
        </div>
        <div class="copyright-item">
            <div class="item-number">6</div>
            <div class="item-content">本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。</div>
        </div>
    </div>
</div>