子比美化 两款二次元卡通风格文章版权声明

美化介绍

两款非常好看的二次元卡通风格的文章版权声明，简单实用，文章必备的美化

风格一

风格二

添加代码

<div class="article-copyright" style="background: linear-gradient(135deg, #f9d6e4, #e6f3ff); padding: 20px; border-radius: 12px; border: 2px solid #ff7eb9; margin: 20px 0; font-size: 14px; color: #555; position: relative; overflow: hidden;">
    <!-- 二次元装饰图标 -->
    <span style="position: absolute; top: -10px; right: -10px; font-size: 50px; color: #ff7eb9; opacity: 0.2;">🎀</span>
    <span style="position: absolute; bottom: -10px; left: -10px; font-size: 50px; color: #ff7eb9; opacity: 0.2;">🌸</span>

    <p style="margin: 0; line-height: 1.6;">
        <strong style="color: #ff7eb9; font-size: 16px;">📜 版权声明：</strong><br>
        本文为原创文章，版权归 <a href="https://www.zibll.com" style="color: #ff7eb9; text-decoration: none; font-weight: bold;">子比主题</a> 所有。<br>
        未经许可，禁止转载。如需转载，请联系作者并获得授权。<br>
        授权方式：<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" style="color: #ff7eb9; text-decoration: none; font-weight: bold;">CC BY-NC-SA 4.0</a>（署名-非商业性使用-相同方式共享）。
    </p>
</div>

外观上没有较大区别，仅在黑夜模式下颜色更为柔和

<div class="article-copyright" style="
    background: var(--copyright-bg, linear-gradient(135deg, #ffd1dc, #c1e1ff));
    padding: 20px;
    border-radius: 16px;
    border: 3px solid var(--copyright-border, #ff7eb9);
    margin: 20px 0;
    font-size: 14px;
    color: var(--copyright-text, #333);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--copyright-shadow, rgba(255, 126, 185, 0.3));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
">
    <!-- 二次元装饰图标 -->
    <span style="position: absolute; top: -20px; right: -20px; font-size: 80px; color: var(--copyright-icon, #ff7eb9); opacity: 0.2; transform: rotate(30deg);">🎀</span>
    <span style="position: absolute; bottom: -20px; left: -20px; font-size: 80px; color: var(--copyright-icon, #ff7eb9); opacity: 0.2; transform: rotate(-30deg);">🌸</span>

    <!-- 动态悬浮效果 -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, var(--copyright-particle, rgba(255, 126, 185, 0.2)) 10%, transparent 10.01%); background-size: 20px 20px; animation: move 3s infinite linear;"></div>

    <!-- 版权声明内容 -->
    <div style="position: relative; z-index: 2;">
        <strong style="color: var(--copyright-title, #ff7eb9); font-size: 18px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
            <span style="font-size: 24px;">📜</span> 版权声明：
        </strong>
        <p style="margin: 0; line-height: 1.5; text-indent: 0;">
            本文为原创文章，版权归 <a href="https://www.zibll.com" style="color: var(--copyright-link, #ff7eb9); text-decoration: none; font-weight: bold;">子比主题</a> 所有。<br>
            未经许可，禁止转载。如需转载，请联系作者并获得授权。<br>
            授权方式：<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" style="color: var(--copyright-link, #ff7eb9); text-decoration: none; font-weight: bold;">CC BY-NC-SA 4.0</a>（署名-非商业性使用-相同方式共享）。
        </p>
    </div>
</div>

<!-- 动态背景动画 -->
<style>
    @keyframes move {
        0% { background-position: 0 0; }
        100% { background-position: 20px 20px; }
    }
    .article-copyright:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px var(--copyright-shadow-hover, rgba(255, 126, 185, 0.4));
    }

    /* 日间模式样式 */
    :root {
        --copyright-bg: linear-gradient(135deg, #ffd1dc, #c1e1ff);
        --copyright-border: #ff7eb9;
        --copyright-text: #333;
        --copyright-title: #ff7eb9;
        --copyright-link: #ff7eb9;
        --copyright-icon: #ff7eb9;
        --copyright-shadow: rgba(255, 126, 185, 0.3);
        --copyright-shadow-hover: rgba(255, 126, 185, 0.4);
        --copyright-particle: rgba(255, 126, 185, 0.2);
    }

    /* 夜间模式样式 */
    [data-theme='dark'] {
        --copyright-bg: linear-gradient(135deg, #3a1f4a, #1a1a2e);
        --copyright-border: #ff7eb9;
        --copyright-text: #ddd;
        --copyright-title: #ff7eb9;
        --copyright-link: #ff7eb9;
        --copyright-icon: #ff7eb9;
        --copyright-shadow: rgba(255, 126, 185, 0.2);
        --copyright-shadow-hover: rgba(255, 126, 185, 0.3);
        --copyright-particle: rgba(255, 126, 185, 0.1);
    }
</style>