主页 / 问题 / 1007579
Accepted
Alexandr_TT
Asked:2020-07-28 23:45:58 +0000 UTC2020-07-28 23:45:58 +0000 UTC

如何使用 CSS 为径向渐变设置动画？

  • 772

我正在尝试为 div 块创建径向渐变闪光动画效果，但我不确定我的方法是否是最好的方法。

我还没有找到任何其他解决方案来实现我想要实现的目标。我发现的例子只是看起来像叠加的闪光效果。

我发现的大多数示例如下所示：http: //jsfiddle.net/nqQc7/512/。

以下是我到目前为止所得到的：

#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  /*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite;
}

@keyframes colorChange {
  0% {
    background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  50% {
    background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  100% {
    background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  /*0% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 0;  }*/
  /*10% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 1;  }*/
  /*40% { transform: translateY(-20vh) translateX(17vw) ; opacity: 1; }*/
  /*50% { transform: translateY(-20vh) translateX(17vw) ; opacity: 0; }*/
  /*60% { transform: translateY(-20vh) translateX(17vw) ; opacity: 1; }*/
  /*90% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 1; }*/
  /*100% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 0; }*/
}
<div id="shine-div">
  Shine
</div>

是否有可能以及如何使顶部的白色光泽从左向右平滑移动？

css

2 个回答

  1. 您可以以不同的方式制作渐变并为其位置设置动画。诀窍是将渐变的大小加倍并使值stop-color成为其实际值的一半以保持相同的视觉渐变，然后从左到右对其进行动画处理。

    • 由于远角计算，它看起来与您在动画中定义的渐变不完全相同

      #shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: 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%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position:top left;
  }
}
      <div id="shine-div">
  Shine
</div>

    • 要使用渐变更接近您的示例，您还可以为大小设置动画：

      #shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: 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/400% 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate linear;
}

@keyframes colorChange {
  from {
    background-position:top 0 left 33%;
    background-size:400% 200%;
  
  }
  50% {
    background-position:top center;
    background-size:200% 200%;
  }
  to {
    background-position:top 0 right 33%;
    background-size:400% 200%;
  }
}
      <div id="shine-div">
  Shine
</div>

    • 您还可以在给定伪元素的情况下执行相同的动画并 transform获得更好的性能： 

      #shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  overflow:hidden;
  position:relative;
  z-index:0;
}
#shine-div:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:400%;
  height:200%;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%);
  animation: colorChange 5s infinite alternate linear;
}

@keyframes colorChange {
  from {
    transform:translateX(-50%);
  }
  50% {
    transform:scaleX(0.75) translateX(-50%)
  }
  to {
    transform:translateX(-25%);
  }
 }
      <div id="shine-div">
  Shine
</div>

    • 8
  2. Best Answer

    SVG 解决方案

    所有滤镜、渐变、蒙版、剪辑都来自 SVG 的 CSS。因此，有必要添加一个带有 SVG 渐变的解决方案。

    原则上，我将重复 css 解决方案中的所有内容，相同的颜色stop-color，相同的百分比stop offset

    水平移动渐变

    动画是通过改变fx径向渐变参数的值来实现的，该参数负责渐变中心的水平坐标。

    开始动画 - 点击矩形

    <div id="shine-div">
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400"  height="100" viewBox="0 0 400 100">
   <defs>
   <radialGradient id="radGrad"  fx="0%" fy="5%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
      <stop offset="4%" stop-color ="#ffb3ff" />
       <stop offset="12.25%" stop-color ="#ff33ff" />
        <stop offset="31.25%" stop-color ="#800080" />
         <stop offset="50%" stop-color ="#b300b3" /> 
         
   </radialGradient>
   </defs> 
    <g id="gr1" > 
   <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
    </g>  
    <animate xlink:href="#radGrad"
      attributeName="fx"
      dur="2s"begin="gr1.click"
      values="0%;50%;50%;100%;0%"
      repeatCount="1"
      restart="whenNotActive" />
  </svg>
</div>

    属性keyTimes提供不均匀的运动，值的数量必须等于属性中的值的数量在这里values 阅读更多。

      values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"

    垂直渐变动画

    在这种情况下，动画fy

    <div id="shine-div">
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400"  height="100" viewBox="0 0 400 100">
   <defs>
   <radialGradient id="radGrad"  fx="48%" fy="0%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
      <stop offset="3%" stop-color ="#ffb3ff" />
      <stop offset="12.25%" stop-color ="#ff33ff" />
      <stop offset="31.25%" stop-color ="#800080" />
        <stop offset="50%" stop-color ="#b300b3" /> 
         
   </radialGradient>
   </defs> 
    <g id="gr1" > 
   <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
    </g>  
    <animate xlink:href="#radGrad"
      attributeName="fy"
      dur="2s"begin="gr1.click"
      values="0%;50%;50%;100%;50%;50%;0%"
      repeatCount="1"
      restart="whenNotActive" />
  </svg>
</div>

    对角线动画

    两个参数同时动画fx，fy

    <div id="shine-div">
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400"  height="100" viewBox="0 0 400 100">
   <defs>
   <radialGradient id="radGrad"  fx="0%" fy="0%" r="200%">
     <stop offset="0%" stop-color ="#FFFFFF" />
      <stop offset="3%" stop-color ="#ffb3ff" />
      <stop offset="12.25%" stop-color ="#ff33ff" />
      <stop offset="31.25%" stop-color ="#800080" />
      <stop offset="50%" stop-color ="#b300b3" /> 
         
   </radialGradient>
   </defs> 
    <g id="gr1" > 
   <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
    </g>  
    <animate xlink:href="#radGrad"
      attributeName="fy"
      dur="2s"begin="gr1.click"
      values="0%;50%;50%;100%;50%;50%;0%"
      repeatCount="1"
      restart="whenNotActive" />
         <animate xlink:href="#radGrad"
      attributeName="fx"
      dur="2s"begin="gr1.click"
      values="0%;50%;50%;100%;50%;50%;0%"
       repeatCount="1"
      restart="whenNotActive" />
  </svg>
</div>

    悬停动画

    动画开始条件： begin="rect1.mouseover"

    <style>
 
</style>
<div id="shine-div">
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400"  height="100" viewBox="0 0 400 100">
   <defs>
   <radialGradient id="radGrad"  fx="0%" fy="5%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
      <stop offset="4%" stop-color ="#ffb3ff" />
      <stop offset="12.25%" stop-color ="#ff33ff" />
      <stop offset="31.25%" stop-color ="#800080" />
      <stop offset="50%" stop-color ="#b300b3" /> 
         
   </radialGradient>
   </defs> 
    <g id="gr1" > 
   <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
    </g>  
    <animate xlink:href="#radGrad"
      attributeName="fx"
      dur="1s"
      begin="rect1.mouseover"
       values="0%;100%;0%"
       repeatCount="1"
     fill="freeze"
       />
  </svg>
</div>

    • 3

相关问题