CSSで画像のアニメーション光の反射やjQueryの

私は右サイドから中に入ると左側から出て行くために、画像上の白色光の反射をアニメーション化する必要があります画像の私はこのようにそれにSVGといくつかの効果をした：

<div class="wrapper_1"> 
<img src="../images/stone.png"/> 
<svg width="1600" height="600" viewBox="0 0 1600 600"> 
    <filter id="demo1"> 
     <feGaussianBlur stdDeviation="3" result="blur4"/> 
     <!--Lighting effect--> 
     <feSpecularLighting result="spec4" in="blur4" specularExponent="35" lighting-color="#cccccc"> 
      <!--Light source effect--> 
      <fePointLight x="75" y="100" z="200"> 
       <!--Lighting Animation--> 
       <animate attributeName="x" values="75;320;75" dur="10s" repeatCount="indefinite"/> 
      </fePointLight> 
     </feSpecularLighting> 
     <!--Composition of inputs--> 
     <feComposite in="SourceGraphic" in2="spec4" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> 
    </filter> 
    <filter id="demo2"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur5"/> 
     <!--Composition of inputs--> 
     <feComposite in="SourceGraphic" in2="blur5" operator="arithmetic" k1="0" k2="3" k3="3" k4="0"/> 
    </filter> 
    <!--Apple tree graphic--> 
    <g class="tree" filter="url(#demo4)"> 
     <g> 
      <line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_35"/> 
      <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_36"/> 
      <line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_39"/> 
      <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_41"/> 
     </g> 
     <g display="inline"> 
      <line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_28"/> 
      <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_29"/> 
      <path fill="none" stroke="" stroke-linejoin="null" stroke-linecap="round" d="m274.31702,193.091c9.00897,-18.4798 14.82697,11.772 13.758,9.87198l12.98898,-18.55298" transform="rotate(50, 287.689, 193.73)" id=""/> 
      <line fill="none" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_32"/> 
      <path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-round="square" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_34"/> 
     </g> 
    </g> 
</svg>

それがworkeませんでした。実際にはSVGで試してみましたが、CSSやJqueryを探しています
way.so誰かが助けることができますか？

出典

2017-05-02 Fereydoon Barikzehy

あなたが/試さなかったものを投稿することができますか？ –

@MichaelCoker最後に質問を編集しました。 –

このような効果が出ていますか？ http://jsfiddle.net/AntonTrollback/nqQc7/ –

linear-gradientをバックグラウンドとする擬似要素を使用して、イメージ全体に移動するanimationを使用してこれを実行できます。

div { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -30%; 
 
    right: -200%; 
 
    width: 50%; 
 
    height: 200%; 
 
    opacity: 0; 
 
    transform: rotate(30deg); 
 
    background: rgba(255, 255, 255, 0.13); 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%); 
 
    animation: shine 2s 1s; 
 
} 
 

 
@keyframes shine { 
 
    to { 
 
    opacity: 1; 
 
    right: 210%; 
 
    } 
 
}

<div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</div>

出典

2017-05-02 19:12:59

CSSで画像のアニメーション光の反射やjQueryの

答えて

関連する問題