通过简单的CSS+SVG实现，效果请见本站页脚::Cat_gif:Be_wiped::

---

实现代码

把下面两个代码块塞到合适的地方即可。

<!-- 站点存活时间：CSS样式 -->
<style>
    /* 时间遮罩样式 */
    .time-container {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 10px 25px;
        background: rgba(0,0,0,0.05);
        border-radius: 30px;
        margin: 15px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* 时间文字样式 */
    .time-text {
        font-size: 1.1rem;
        color: #333;
        white-space: nowrap;
    }

    /* 心跳图标样式 */
    .heartbeat-icon {
        width: 24px;
        height: 24px;
        animation: heartbeat 1.2s ease infinite;
    }

    .heartbeat-icon svg {
        width: 100%;
        height: 100%;
        fill: #e74c3c;
    }

    /* 心跳动画 */
    @keyframes heartbeat {
        0% { transform: scale(1); }
        25% { transform: scale(1.15); }
        50% { transform: scale(1); }
        75% { transform: scale(1.25); }
        100% { transform: scale(1); }
    }

    /* 数字样式 */
    .time-number {
        color: #e74c3c;
        font-weight: bold;
        margin: 0 2px;
    }
</style>

<!-- 站点存活时间：JavaScript -->
<script>
    // 存活时间计算
    document.addEventListener('DOMContentLoaded', function() {
        const birthTime = '2019/08/08 12:00:00';
        const container = document.querySelector('footer .container');
  
        // 创建时间遮罩
        const timeContainer = document.createElement('div');
        timeContainer.className = 'time-container';

        // 创建时间显示元素
        const timeText = document.createElement('div');
        timeText.className = 'time-text';
  
        // 创建心跳图标
        const heartIcon = document.createElement('span');
        heartIcon.className = 'heartbeat-icon';
        heartIcon.innerHTML = `
            <svg viewBox="0 0 32 29.6">
                <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
                c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
            </svg>
        `;

        // 组装元素
        timeContainer.appendChild(timeText);
        timeContainer.appendChild(heartIcon);
        container.insertBefore(timeContainer, container.firstChild);

        // 时间计算函数
        function calculateTime() {
            const now = new Date();
            const birthDate = new Date(birthTime);
            const lived = now - birthDate;

            const days = Math.floor(lived / (24*60*60*1000));
            const hours = Math.floor((lived % (24*60*60*1000)) / (60*60*1000));
            const minutes = Math.floor((lived % (60*60*1000)) / (60*1000));
            const seconds = Math.floor((lived % (60*1000)) / 1000);

            return {
                days: days.toString().padStart(3, '0'),
                hours: hours.toString().padStart(2, '0'),
                minutes: minutes.toString().padStart(2, '0'),
                seconds: seconds.toString().padStart(2, '0')
            };
        }

        // 更新时间显示
        function updateDisplay() {
            const time = calculateTime();
            timeText.innerHTML = `
                小站已嘎嘎运行
                <span class="time-number">${time.days}</span>天
                <span class="time-number">${time.hours}</span>时
                <span class="time-number">${time.minutes}</span>分
                <span class="time-number">${time.seconds}</span>秒 
            `;
        }

        // 初始显示并启动定时器
        updateDisplay();
        setInterval(updateDisplay, 1000);
    });
</script>

适配移动端尺寸

在CSS样式中补充：

    /* 移动端适配 */
    @media (max-width: 768px) {
        .time-container {
            padding: 6px 15px;  /* 更紧凑 */
            gap: 6px;
        }
  
        .time-text {
            font-size: 0.8rem;  /* 更小字号 */
        }
  
        .heartbeat-icon {
            width: 18px;  /* 更小心（） */
            height: 18px;
        }
  
        .time-number {
            font-size: 0.85rem;  /* 数字单独调整 */
        }
    }

适配Mirages主题的夜间模式

如果你在使用同款主题，可以继续在CSS样式中补充：

    /* 夜间模式 */
    body.theme-dark .time-container {
        background: rgba(255,255,255,0.15);
        box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    }

    body.theme-dark .time-text {
        color: #f0f0f0;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    body.theme-dark .time-number {
        color: #ff7777;
        text-shadow: 0 2px 4px rgba(255,120,120,0.3);
    }

    body.theme-dark .heartbeat-icon svg {
        fill: #ff5555;
        filter: drop-shadow(0 0 6px rgba(255,80,80,0.4));
    }

    /* 添加过渡动画 */
    .time-container,
    .time-text,
    .time-number,
    .heartbeat-icon svg {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

如果是其他博客主题，代码可能不完全适用，请具体情况具体分析。

其他调整

默认样式其实有点大不啦叽，适合我这种内容空空的页脚

如果你喜欢小小的也很可爱，可以从以下CSS样式着手调整：

1.调整遮罩尺寸

    /* 修改前 */
    .time-container {
        padding: 10px 25px;
        border-radius: 30px;
        margin: 15px 0;
    }

    /* 修改后 */
    .time-container {
        padding: 8px 20px;  /* 减少内边距 */
        border-radius: 20px;  /* 更圆润的弧度 */
        margin: 10px 0;  /* 减少外边距 */
    }

2.调整文字大小

    /* 修改前 */
    .time-text {
        font-size: 1.1rem;
    }

    /* 修改后 */
    .time-text {
        font-size: 0.9rem;  /* 缩小文字 */
    }

3.调整心跳icon尺寸

    /* 修改前 */
    .heartbeat-icon {
        width: 24px;
        height: 24px;
    }

    /* 修改后 */
    .heartbeat-icon {
        width: 20px;  /* 缩小图标 */
        height: 20px;
        margin-left: 4px;  /* 调整间距 */
    }

以上是几个栗子，建议依照自己的审美，动动小手自己试试哈。

最后这里，可能还有聪明的吴彦祖要问：

主包主包，你的炽热心跳❤️确实很好看，但是太单调了，有没有更加美观又实用的样式推荐一下嘛？

有的，兄弟有的：

    /* 修改前 */
    .heartbeat-icon svg {
        width: 100%;
        height: 100%;
        fill: #e74c3c;
    }

    /* 修改后 */
    .heartbeat-icon svg {
        width: 100%;
        height: 100%;
        fill: #c00085;  /* 改成紫色 */
    }

类似的，对于夜间模式适配部分：

    /* 修改前 */
    body.theme-dark .heartbeat-icon svg {
        fill: #ff5555;
        filter: drop-shadow(0 0 6px rgba(255,80,80,0.4));
    }

    /* 修改后 */
    body.theme-dark .heartbeat-icon svg {
        fill: #d50096;  /* 改成更紫的紫色 */
        filter: drop-shadow(0 0 6px rgba(255,80,80,0.4));
    }

对他使用紫色心情🩷吧。

|´・ω・) ノ未经允许，不能随便转载哦~