滚动至视口时触发Bootstrap 4圆形图片边框CSS动画求助

没问题！我来帮你搞定这个滚动触发的边框动画效果，结合Bootstrap 4的圆形图片样式，同时只在元素进入视口时启动动画。下面是完整的实现步骤和代码：

1. HTML结构 #

我们需要把Bootstrap的圆形图片放到一个带动画容器的结构里，这样才能承载边框动画：

<!-- 滚动触发的动画容器 -->
<div class="border-animation-wrap">
  <div class="circle-border">
    <!-- Bootstrap 4圆形图片 -->
    <img src="你的图片地址" class="img-fluid rounded-circle" alt="圆形图片">
    <!-- 用于绘制边框的SVG（模拟动画边框） -->
    <svg class="circle-svg" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="45" />
    </svg>
  </div>
</div>

2. CSS样式 #

这里我们先设置基础样式，然后定义边框绘制的动画，初始状态下动画不执行，只有当元素被标记为animate时才触发：

/* 容器基础样式 */
.border-animation-wrap {
  margin: 50px auto;
  width: 200px; /* 根据你的图片大小调整 */
}

.circle-border {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}

/* Bootstrap圆形图片样式增强 */
.circle-border img.rounded-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* SVG边框样式 */
.circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.circle-svg circle {
  fill: none;
  stroke: #007bff; /* 边框颜色，可自定义 */
  stroke-width: 3;
  stroke-dasharray: 283; /* 圆的周长：2*π*45 ≈ 283 */
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.5s ease-in-out;
}

/* 触发动画的类 */
.circle-border.animate .circle-svg circle {
  stroke-dashoffset: 0;
}

3. JavaScript逻辑 #

核心是监听滚动事件，判断元素是否进入视口，一旦进入就添加animate类触发动画，同时做防抖处理避免频繁触发：

// 防抖函数，避免滚动时频繁执行
function debounce(func, wait = 100) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 判断元素是否在视口内
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.bottom >= 0
  );
}

// 处理滚动事件
function handleScroll() {
  const animationElements = document.querySelectorAll('.circle-border');
  animationElements.forEach(el => {
    if (isInViewport(el) && !el.classList.contains('animate')) {
      el.classList.add('animate');
    }
  });
}

// 初始化：页面加载时先检查一次，避免元素一开始就在视口内
window.addEventListener('load', handleScroll);
// 监听滚动事件，用防抖优化
window.addEventListener('scroll', debounce(handleScroll));

关键说明 #

• Bootstrap适配：我们用了Bootstrap 4的rounded-circle和img-fluid类来保证图片的圆形响应式效果。
• 动画原理：通过SVG的stroke-dasharray和stroke-dashoffset属性实现边框绘制动画，初始时偏移量等于周长，动画时偏移量变为0，就会呈现边框从无到有的绘制效果。
• 滚动触发：通过getBoundingClientRect()判断元素是否进入视口，进入后添加animate类启动动画，防抖函数能减少滚动时的性能消耗。
• 自定义调整：你可以修改CSS里的stroke颜色、stroke-width宽度、动画时长1.5s，还有容器宽度来适配你的需求。

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