如何实现可通过jQuery触发的加长版顺时针循环动画边框？

嘿，作为CSS新手，咱们一步步搞定这个效果！核心思路是用CSS关键帧动画实现顺时针循环的边框线条，再用jQuery控制动画的触发，同时轻松调整线条长度满足你的需求。

第一步：搭建基础HTML结构 #

我们需要一个容器来承载动画边框，按钮放在容器中间：

<div class="btn-animation-container hidden-animation" id="myJqueryAnimation">
  <!-- 两个辅助元素用来做右、左边框 -->
  <span class="border-top"></span>
  <span class="border-bottom"></span>
  <button class="action-btn">点击触发动画</button>
</div>

第二步：编写CSS样式与动画逻辑 #

这部分是核心，我们用四个元素（两个伪元素+两个span）分别对应上下左右四条边框，设置长线条长度并定义顺时针循环的关键帧动画：

/* 动画容器：给边框提供定位基准 */
.btn-animation-container {
  position: relative;
  width: 220px; /* 根据按钮大小调整 */
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 按钮基础样式，确保在边框上方 */
.action-btn {
  padding: 14px 36px;
  border: none;
  background: #2563eb;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1;
}

/* 四条边框的通用样式 */
.btn-animation-container::before,
.btn-animation-container::after,
.btn-animation-container .border-top,
.btn-animation-container .border-bottom {
  content: '';
  position: absolute;
  background: #2563eb; /* 边框颜色，和按钮统一 */
  animation-duration: 2.5s; /* 动画循环时长，数值越小速度越快 */
  animation-timing-function: linear;
  animation-iteration-count: infinite; /* 无限循环 */
}

/* 上边线条：设置为35%长度（你要的稍长线条） */
.btn-animation-container::before {
  width: 35%;
  height: 2px;
  top: 0;
  left: 0;
  animation-name: animateTop;
}

/* 右边线条：同样35%长度 */
.btn-animation-container .border-top {
  width: 2px;
  height: 35%;
  top: 0;
  right: 0;
  animation-name: animateRight;
}

/* 下边线条：35%长度 */
.btn-animation-container::after {
  width: 35%;
  height: 2px;
  bottom: 0;
  right: 0;
  animation-name: animateBottom;
}

/* 左边线条：35%长度 */
.btn-animation-container .border-bottom {
  width: 2px;
  height: 35%;
  bottom: 0;
  left: 0;
  animation-name: animateLeft;
}

/* 顺时针关键帧动画：每条边依次展开、移动、隐藏 */
@keyframes animateTop {
  0% { left: 0; width: 35%; }
  25% { left: 0; width: 100%; } /* 上边从左到右拉满整个容器 */
  50%, 100% { left: 100%; width: 0; } /* 上边移到右侧隐藏 */
}

@keyframes animateRight {
  0%, 25% { top: 0; height: 35%; }
  50% { top: 0; height: 100%; } /* 右边从上到下拉满整个容器 */
  75%, 100% { top: 100%; height: 0; } /* 右边移到下方隐藏 */
}

@keyframes animateBottom {
  0%, 50% { right: 0; width: 35%; }
  75% { right: 0; width: 100%; } /* 下边从右到左拉满整个容器 */
  100% { right: 100%; width: 0; } /* 下边移到左侧隐藏 */
}

@keyframes animateLeft {
  0%, 75% { bottom: 0; height: 35%; }
  100% { bottom: 0; height: 100%; } /* 左边从下到上拉满整个容器 */
}

/* 默认隐藏动画，等待jQuery触发 */
.btn-animation-container.hidden-animation::before,
.btn-animation-container.hidden-animation::after,
.btn-animation-container.hidden-animation .border-top,
.btn-animation-container.hidden-animation .border-bottom {
  animation-play-state: paused;
  opacity: 0;
}

第三步：用jQuery触发动画 #

现在可以通过jQuery轻松控制动画的播放，支持点击触发或直接调用：

// 方式1：点击按钮触发动画
$('.action-btn').click(function() {
  $('#myJqueryAnimation').removeClass('hidden-animation');
});

// 方式2：直接触发（类似你说的$('#xxx').animate()调用方式）
// 比如页面加载完成后自动触发：
// $(document).ready(function() {
//   $('#myJqueryAnimation').removeClass('hidden-animation');
// });

// 如果需要暂停动画，只需加回隐藏类：
// $('#myJqueryAnimation').addClass('hidden-animation');

调整线条长度的小技巧 #

想要线条更长？只需要把CSS中所有的35%改成你想要的数值（比如45%），同时同步修改对应关键帧里的初始长度值即可，非常直观！

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