使用前端技术实现静态图片局部流动效果

实现静态图片局部流动效果，可以使用前端技术中的CSS3动画和JavaScript相结合的方式来实现。

首先，在HTML中插入一张静态图片，如下所示：

<img src="your-image.jpg" alt="Your Image">

然后，在CSS中为该图片添加一个类，例如 "flow"，并设置其样式，如下所示：

.flow {
  position: relative;
  overflow: hidden;
}

.flow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.flow::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: flow 2s ease-in-out infinite;
}

@keyframes flow {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

上述CSS代码中，首先为外层容器设置了 `position: relative` 和 `overflow: hidden` 属性，使得容器可以相对定位，并且其内容超出容器部分被隐藏。

然后，通过为容器的 `::before` 伪元素添加样式，实现了一个白色圆形遮罩层，该遮罩层会通过 `animation` 属性执行 `flow` 关键帧动画，该动画会使得遮罩层逐渐放大并消失。最后，给图片设置了 `position: absolute` 和 `z-index: -1` 属性，使其可以相对定位并处于遮罩层下方。

最后，在JavaScript代码中，可以通过获取图片元素和遮罩层元素，来动态设置遮罩层的位置和大小，实现局部流动效果。

const img = document.querySelector("img");
const flow = document.querySelector(".flow");

window.addEventListener("mousemove", e => {
  const x = e.clientX;
  const y = e.clientY;
  const {left, top, width, height} = img.getBoundingClientRect();
  
  const posX = (x - left) / width * 100 + "%";
  const posY = (y - top) / height * 100 + "%";
  
  flow.style.left = posX;
  flow.style.top = posY;
});

上述JavaScript代码中，首先获取了图片和遮罩层元素，并为窗口添加了一个鼠标移动事件监听器。当鼠标移动时，计算出鼠标在图片中的相对位置，并将遮罩层的位置设置为该位置，实现局部流动效果。

综上所述，通过以上的CSS和JavaScript代码，可以实现一张静态图片的局部流动效果。