如何在PNG遮罩内实现两个旋转径向渐变动画？

直接上可运行的代码实现，核心是用两个独立元素承载渐变，配合动画和遮罩继承，实现你要的双旋转效果：

CSS 代码 #

.box {
  display: inline-block;
  width: 300px;
  position: relative;
  /* 替换为你的PNG遮罩本地路径 */
  -webkit-mask: url(your-thunder-mask.png) center/cover;  
  mask: url(your-thunder-mask.png) center/cover;
}

/* 维持正方形比例 */
.box::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* 第一个旋转渐变（蓝白色系） */
.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 25% 35%, rgba(255,255,255,1) 0%, rgba(197,251,255,1) 6%, rgba(64,188,255,1) 12%, rgba(0,0,0,0) 28%);
  animation: spin 12s linear infinite;
}

/* 第二个旋转渐变（橙黄色系） */
.box .grad-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 75% 65%, rgba(255,220,100,1) 0%, rgba(255,160,40,1) 8%, rgba(255,80,0,1) 15%, rgba(0,0,0,0) 30%);
  animation: spin 18s linear reverse infinite;
}

/* 旋转动画核心 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML 代码 #

<div class="box">
  <div class="grad-2"></div>
</div>

关键调整说明 #

• 父容器.box设置position: relative，让内部两个渐变元素可以完全铺满容器，同时继承遮罩属性，保证渐变只在PNG形状内显示。
• 两个渐变分别放在伪元素和独立div中，通过radial-gradient的at参数设置不同的起始位置（比如左上角区域和右下角区域），实现遮罩内分位置显示的效果。
• 给两个渐变配置独立动画：可以修改animation的时长、旋转方向，实现差异化的旋转动效，匹配你要的参考效果。
• 渐变的最终色值设为透明，避免两个渐变重叠时出现生硬的遮挡边界，让过渡更自然。

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