如何为论坛帖子顶部边框添加从左到右的颜色脉冲动画

我已经完成了论坛帖子顶部边框颜色的自定义功能（用户可自行选择颜色），当前是静态效果，想要优化成颜色从左到右填充的脉冲动画——比如红色边框，从左端开始填充到右端，之后重复这个过程，不需要复杂循环。

现有jQuery代码如下（能正常运行但写法较杂乱）：

$(document).ready(function() {
 
    var postDivs = $(".post");
    $.each(postDivs, function(index, div) {
        var color = ($(".post .postprofile-info")[index].firstChild.nextSibling.data[0] == "#") ? $(".post .postprofile-info")[index].firstChild.nextSibling.data : "#d4d4d4";
        $(this).css("border-top", "15px solid " + color);
        var element1 = $(".post .postprofile-info ")[index].firstChild;
        $(".post .postprofile-info")[index].firstChild.nextSibling.data = "";
        element1.style.visibility = "hidden";
 
    });
});

重点需要修改的是这一行：

$(this).css("border-top", "15px solid " + color);

请问怎么添加所需的动画效果？

解决办法 #

直接给border做填充动画不太容易实现，我们可以用CSS伪元素+动画的方式模拟这个效果，配合你的jQuery逻辑传递颜色，具体步骤如下：

1. 编写CSS动画样式 #

给.post加相对定位，用:before伪元素模拟顶部边框，然后定义从左到右填充的动画：

.post {
    position: relative;
    /* 保留默认边框作为基底，避免动画间隙边框消失 */
    border-top: 15px solid #d4d4d4;
}

.post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 0;
    /* 通过CSS变量接收动态颜色 */
    background-color: var(--border-color);
    /* 2秒匀速填充，无限重复动画 */
    animation: borderFill 2s linear infinite;
}

@keyframes borderFill {
    to {
        width: 100%;
    }
}

2. 修改jQuery代码 #

把原来直接设置border-top的逻辑，改成给.post元素设置CSS变量，传递用户选择的颜色：

$(document).ready(function() {
    var postDivs = $(".post");
    $.each(postDivs, function(index, div) {
        // 保留原有的颜色获取逻辑
        var color = ($(".post .postprofile-info")[index].firstChild.nextSibling.data[0] == "#") 
            ? $(".post .postprofile-info")[index].firstChild.nextSibling.data 
            : "#d4d4d4";
        
        // 用CSS变量传递颜色，替代直接设置border
        $(div).css('--border-color', color);
        
        // 保留原有的元素隐藏逻辑
        var element1 = $(".post .postprofile-info")[index].firstChild;
        $(".post .postprofile-info")[index].firstChild.nextSibling.data = "";
        element1.style.visibility = "hidden";
    });
});

补充说明 #

• 伪元素的作用：模拟顶部边框的填充效果，通过宽度从0到100%的变化，实现从左到右的脉冲动画
• CSS变量的好处：灵活传递动态获取的颜色值，不用在CSS里硬编码固定颜色
• 动画可自定义：2s是动画时长，你可以改成1.5s或者其他数值；如果想让动画结束后有短暂停顿，可以添加animation-delay或者调整keyframes的阶段

这样就能实现你要的“从左到右填充，到达右端后重复”的脉冲效果了。

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