如何在 CSS 中从左到右制作径向渐变光泽效果的动画？

使用 CSS 制作径向渐变动画

问题：

您想要创建一个径向- div 上的渐变“闪耀”效果，使白色高光从左到右平滑移动对。

解决方案：

1. 双倍渐变大小和 50% 色标：

   创建两倍于 div 大小的径向渐变。将颜色停止点设置为其原始值的一半（例如，4% 而不是 8% 等）。这可确保视觉外观保持不变。

2. 动画渐变位置：

   使用关键帧动画来操作背景位置属性。从右上角的渐变开始，将其设置为左上角的动画。通过设置动画交替，它会反转方向。

示例代码：

#shine-div {
  height: 30vh;
  width: 60vw;
  margin: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top,
    #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%,
    #800080 31.25%, #b300b3 50%) top right/200% 200%;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position: top left;
  }
}

注意：由于最远角的计算，梯度可能与原始定义不完全相同。

以上是如何在 CSS 中从左到右制作径向渐变光泽效果的动画？的详细内容。更多信息请关注PHP中文网其他相关文章！