web-dev-qa-db-ja.com

CSSを使用して放射状グラデーションをアニメーション化する方法は？

私は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%)
  }
}
<div id="shine-div">
  Shine
</div>

これは可能ですか？左から右へスムーズに行くように上から白を照らしたいですか？私は私の試みで正しい軌道に乗っていますか？

csssvgcss-animationsradial-gradients
9
Lv007

SVGソリューション

著者はSVGを使用して問題の解決策を求めませんでした。ただし、1つの問題をいくつかの方法で解決すると便利です。
グラデーション属性値は、@ Temani Afif応答から取得されました。
この質問のSVG放射状グラデーション式：

<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>

グラデーションをアニメーション化するには、数式に含まれている任意の属性を使用できます。
以下の例では、属性fxおよびfyを使用します

  • 水平方向のグラデーションの動きのアニメーション

長方形をクリックするとアニメーションが開始します

svg {
 width:50%;
 height:50%;
 }
 .txt {
 font-family:sans-serif;
 font-size:28px;
 font-weight:bold;
 text-anchor:middle;
 fill:#FFDD00;
  }
<div id="shine-div">
   <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
   <defs>
  <radialGradient id="radGrad"  fx="0%" fy="0%" 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 class="txt" x="50%" y="60%"> Sun shine </text>
        </g>  
    <animate xlink:href="#radGrad"
          attributeName="fx"
          dur="3s"begin="gr1.click"
          values="0%;100%;0%"
          
          repeatCount="1"
          restart="whenNotActive" />
  </svg>
</div>
  • 垂直方向のグラデーションの動きのアニメーション。
svg {
 width:50%;
 height:50%;
 }
 .txt {
 font-family:sans-serif;
 font-size:28px;
 font-weight:bold;
 text-anchor:middle;
 fill:#FFDD00;
  }
<div id="shine-div">
   <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
   <defs>
  <radialGradient id="radGrad"  fx="48%" fy="0%" 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 class="txt" x="50%" y="60%"> Sun shine </text>
        </g>  
    <animate xlink:href="#radGrad"
          attributeName="fy"
          dur="2s"begin="gr1.click"
          values="0%;50%;50%;100%;50%;50%;0%"
          keyTimes="0;0.1;0.5;0.6;0.7;0.9;1"
          repeatCount="1"
          restart="whenNotActive" />
  </svg>
</div>
  • グラデーションを斜め​​に移動する

2つの属性が同時にアニメーション化されます：fxおよびfy

svg {
 width:50%;
 height:50%;
 }
 .txt {
 font-family:sans-serif;
 font-size:28px;
 font-weight:bold;
 text-anchor:middle;
 fill:#FFDD00;
  }
<div id="shine-div">
   <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
   <defs>
  <radialGradient id="radGrad"  fx="0%" fy="0%" 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 class="txt" x="50%" y="60%"> Sun shine </text>
        </g>  
    <animate xlink:href="#radGrad"
          attributeName="fy"
          dur="2s"begin="gr1.click"
          values="0%;50%;50%;100%;0%"
          keyTimes="0;0.1;0.5;0.9;1"
          repeatCount="1"
          restart="whenNotActive" />
          
             <animate xlink:href="#radGrad"
                          attributeName="fx"
                          dur="2s"begin="gr1.click"
                          values="0%;50%;50%;100%;0%"
                          keyTimes="0;0.1;0.5;0.9;1"
                          repeatCount="1"
                          restart="whenNotActive" />
  </svg>
</div>
4
Alexandr_TT