今天逛友链时，看到染念大佬博客里的恋爱天数小卡片设计挺好看，就简单扒了一下。之前也有大佬分享过另一种样式的卡片，今天我把两种不同样式的代码整理了一下，代码放在博客里，喜欢的朋友可以自行获取！

样式一

样式二

代码一

<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=1502586285&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=1502586285&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>

代码二

<!-- 恋爱计时 -->
<ul class="joe_header__slideout-count">
    <div id="wniui_love"
        style="width: 100%; height: 100%; text-align: center; font-size: 1rem;background-color: #fff;padding: 20px 0;border-radius: 20px;">
        <div id="wniui_loveImage" style="width: 200px; margin: 0 auto;">
            <!-- 左边的头像 -->
            <img src="https://q1.qlogo.cn/g?b=qq&nk=1176996982&s=640" alt="love"
                style="width: 60px; border-radius: 50%;">
            <!-- 中间的图片 -->
            <img src="https://img-blog.nos-eastchina1.126.net/User/loveline/lovecat.gif" alt="love"
                style="width: 60px; border-radius: 50%;">
            <!-- 右边的头像 -->
            <img src="https://q1.qlogo.cn/g?b=qq&nk=1004207495&s=100" alt="love"
                style="width: 60px; border-radius: 50%;">
        </div>
        <p id="loveSitetime" style="font-size: 1.0rem;"></p>
        <script language=javascript>
            function loveSitetime() {
                window.setTimeout("loveSitetime()", 1000);
                var seconds = 1000
                var minutes = seconds * 60
                var hours = minutes * 60
                var days = hours * 24
                var years = days * 365
                var today = new Date()
                var todayYear = today.getFullYear()
                var todayMonth = today.getMonth() + 1
                var todayDate = today.getDate()
                var todayHour = today.getHours()
                var todayMinute = today.getMinutes()
                var todaySecond = today.getSeconds()
                // 时间设置
                var t1 = Date.UTC(2021, 04, 05, 21, 00, 00)
                var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
                var diff = t2 - t1
                var diffYears = Math.floor(diff / years)
                var diffDays = Math.floor((diff / days) - diffYears * 365)
                var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
                var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
                var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                    diffMinutes * minutes) / seconds)
                document.getElementById("loveSitetime").innerHTML = "我们相恋了：</br>" + diffYears + "年" + diffDays + "天" +
                    diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦</br>"
            }
            loveSitetime()
        </script>
    </div>
</ul>