javascript - Css 或 Jquery 中图像的动画光反射

Question

请看下图:

我需要为图像上的白光反射设置动画，使其从图像的右侧进入并从图像的左侧离开。我像这样用 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>

但这并没有奏效。实际上尝试过使用 SVG，但我正在寻找 CSS 或 Jquery
方式。所以有人可以帮忙吗？!

Answer 1

您可以使用具有 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>