如何让CSS Spinner内部文本保持静态不随旋转动画转动？

纯CSS方案（无需修改HTML结构） #

核心思路是将旋转的边框动画转移到伪元素上，让原容器仅负责显示静态文本，完全不需要新增DOM元素。

修改后的CSS代码：

.spinner {
    width: 30px;
    height: 30px;
    position: relative;
    /* 让文本居中显示 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* 伪元素承载旋转的Spinner边框 */
.spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid red;
    border-top: 5px solid green;
    border-radius: 50%;
    animation: spin 3s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

HTML保持原结构不变：

<div class="spinner">abc</div>

说明：伪元素会绝对定位在容器内部，覆盖整个区域并执行旋转动画；原容器没有旋转属性，内部文本自然保持静态，同时通过flex布局让文本居中在Spinner内部。

jQuery方案（兼容原有CSS结构） #

如果不想调整CSS结构，可以通过jQuery给内部文本添加反向旋转动画，抵消父容器的旋转效果：

$(function() {
    // 父容器3秒转360度，每秒旋转120度，文本反向旋转相同角度
    const rotateInterval = setInterval(() => {
        $('.spinner').contents().filter((_, node) => node.nodeType === 3).each(function() {
            // 用span包裹文本节点（仅执行一次）
            if (!$(this).parent().hasClass('static-text')) {
                $(this).wrap('<span class="static-text"></span>');
            }
            // 获取当前文本的旋转角度，反向累加
            const currentTransform = $('.static-text').css('transform');
            const currentDeg = currentTransform !== 'none' ? parseInt(currentTransform.split(',')[5]) : 0;
            $('.static-text').css('transform', `rotate(${currentDeg - 120}deg)`);
        });
    }, 1000);

    // 可选：页面卸载时清除定时器
    $(window).on('unload', () => clearInterval(rotateInterval));
});

说明：这段代码会自动包裹文本节点并添加反向旋转，让文本始终保持静态，无需修改原有CSS和HTML结构。

内容的提问来源于stack exchange，提问作者chris01