如何实现图片上椭圆形遮罩（vignette）缓慢旋转且图片本身保持固定

你当前代码仅定义了静态蛋形边框，没有配置旋转动画逻辑，且直接旋转容器会导致图片同步转动，可尝试以下两种可行方案：

• 方案1：旋转抵消法（无需修改HTML，兼容性最优）
  给外层容器加旋转动画的同时，给内部图片施加反向同速旋转，抵消容器转动带来的位移，视觉上仅保留蛋形外框的转动效果。
  完整CSS代码如下：

  .n-spin-container {
    width: 390px; /* 和内部图片宽高保持一致即可 */
    height: 500px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;  
    overflow: hidden; /* 裁剪超出蛋形范围的图片内容 */
    animation: spinFrame 8s linear infinite; /* 8s为旋转一周的时长，可自行调整 */
  }
  .n-spin-container img {
    display: block;
    animation: spinImg 8s linear infinite; /* 时长必须和容器动画完全一致 */
  }
  /* 容器正向旋转动画 */
  @keyframes spinFrame {
    to {
      transform: rotate(360deg);
    }
  }
  /* 图片反向旋转，抵消容器转动影响 */
  @keyframes spinImg {
    to {
      transform: rotate(-360deg);
    }
  }
  

• 方案2：伪元素独立遮罩法（图片无动画，性能更好）
  用容器的伪元素单独承载蛋形遮罩逻辑，图片全程保持静止，不需要施加任何动画：

  .n-spin-container {
    position: relative;
    width: 390px;
    height: 500px;
  }
  .n-spin-container img {
    display: block;
    position: relative;
    z-index: 1;
  }
  .n-spin-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    /* 外阴影模拟外遮罩，颜色替换为你的页面背景色即可 */
    box-shadow: 0 0 0 999px #ffffff;
    animation: spinFrame 8s linear infinite;
    z-index: 2;
    pointer-events: none; /* 避免遮罩遮挡图片的点击、选中等交互 */
  }
  @keyframes spinFrame {
    to {
      transform: rotate(360deg);
    }
  }
  

• 优化调整建议

  • 如果你想要的是蛋形缓慢形变而非整体旋转，可以直接在keyframes里动态修改border-radius的8个参数值，无需使用旋转属性
  • 给animation属性添加alternate参数，可实现旋转到360度后自动反向转回，避免动画跳转的生硬感

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