网站美化-恋爱天数小卡片[love卡片]

今天我把两种不同的恋爱天数小卡片样式的代码整理了一下，代码放在博客里，喜欢的朋友可以自行获取！

第一种代码

<script src="//at.alicdn.com/t/c/font_3977018_i7ssrxgnwh.js"></script>
<style>
    .wniui_icon {
        width: 1.5rem;
        height: 1.5rem;
        fill: currentColor;
        overflow: hidden;
    }

    .wniui_couple {
        text-align: center;
    }

    .wniui_couple .wniui_pic {
        border-radius: 50%;
        width: 5rem;
        background: #fff;
        padding: 0.125rem;
    }

    .wniui_wniui_couple-love {
        width: 2.1875rem;
        margin: 1.25rem 0;
        animation: heartbeat 1.33s ease-in-out infinite;
    }

    @keyframes heartbeat {
        0% {
            transform: scale(1)
        }

        50% {
            transform: scale(.8)
        }

        to {
            transform: scale(1)
        }
    }

    #our-company {
        background: aliceblue;
        text-align: center;
        margin: 1rem auto;
        color: #7d7474;
        width: 100%;
        border-radius: 0.25rem;
        padding: 0.5rem 0;
        user-select: none;
    }

    #our-company span {
        margin: 0 .25rem;
        vertical-align: middle;
    }

    #our-company svg.icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .wniui_sidebar-box {
        font-size: 1.25rem;
        border: 0.1rem solid #e9ecef;
        padding: 1rem 0;
        background: #fff;
        min-height: 10rem;
        color: #4a4a4a;
        word-break: break-all;
        border-radius: 0.8rem;
        margin-bottom: 1rem;
        box-shadow: 0.5rem 0.875rem 2.375rem rgb(39 44 49 / 6%), 0.0625rem 0.1875rem 0.5rem rgb(39 44 49 / 3%);
    }

    ::-webkit-scrollbar {
        width: 0.375rem;
        height: 0.375rem;
    }

    ::-webkit-scrollbar-track {
        border-radius: 0.1875rem;
        background: rgba(0, 0, 0, 0.06);
        -webkit-box-shadow: inset 0 0 0.3125rem rgba(0, 0, 0, 0.08);
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 0.1875rem;
        background: linear-gradient(to right, #0acffe 0%, #495aff 100%);
        -webkit-box-shadow: inset 0 0 0.625rem rgba(0, 0, 0, 0.2);
    }
</style>
<div class="wniui_sidebar-box wniui_couple"> <img class="wniui_pic" src="https://q1.qlogo.cn/g?b=qq&nk=3125591974&s=640"
        alt="博主"> <img class="wniui_wniui_couple-love" src="https://www.wniui.com/image/love/love.png" alt="爱心"> <img
        class="wniui_pic" src="https://q1.qlogo.cn/g?b=qq&nk=2493186529&s=100" alt="另一半">
    <div id="our-company" data-start="2020-11-06"> </div>
</div>
<script>
    const startDate = '2023-03-12';

    function timeDifference(startDate) {
        const start = new Date(startDate);
        const diff = new Date() - start;
        return {
            years: Math.floor(diff / (1000 * 60 * 60 * 24 * 365)),
            days: Math.floor((diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24)),
            hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
            minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
            seconds: Math.floor((diff % (1000 * 60)) / 1000)
        };
    }

    function updateTime() {
        const el = document.getElementById('our-company');
        if (!el) return;

        const { years, days, hours, minutes, seconds } = timeDifference(startDate);
        el.innerHTML = `
        <span>${years}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-nianqi"></use></svg>
        <span>${days}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-tianshu"></use></svg>
        <span>${hours}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-xiaoshi"></use></svg>
        <span>${minutes}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-fen"></use></svg>
        <span>${seconds}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-miao"></use></svg>
      `;
    }

    document.addEventListener('DOMContentLoaded', () => {
        updateTime();
        setInterval(updateTime, 1000);
    });
</script>

第二种代码