SVG 图片的百叶窗渐变遮掩动效 - 踏得网

SVG: Gradient Mask

svg, mask

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2664
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class='svg'>
    <h2>SVG: Gradient Mask</h2>
    <svg width="400" height="400">
        <defs>
            <radialGradient id="fill" fx="0.5" fy="0.2">
                <stop offset="0.15" stop-color="hsla(255,255%,255%,1)" />
                <stop offset="0.9" stop-color="hsla(234, 95%, 35%, 1)" />
                <stop offset="1" stop-color="hsla(234, 95%, 5%, 1)" />
            </radialGradient>

<pattern id="line" x="0" y="0" width="1" height="16" viewBox="0 0 1 16" patternUnits="userSpaceOnUse">
                <rect x="0" y="0" width="1" height="1" fill="hsla(255,255%,255%,1)">
                    <animate attributeName="y" begin="0s" dur="0.8s" from="0" to="15" repeatCount="indefinite" />
                </rect>
            </pattern>

<mask id="mask1">
                <rect x="0" y="0" height="400" width="400" fill="url(#line)" />
            </mask>

<mask id="mask2">
                <rect x="0" y="0" height="400" width="400" fill="hsla(255,255%,255%,1)">
                    <animate attributeName="y" begin="0s" dur="16s" from="400" to="0" repeatCount="indefinite" />
                </rect>
            </mask>

<g id="image">
                <rect width="100%" height="100%" fill="hsla(0,0%,0%,1)" />
                <circle cx="200" cy="200" r="150" fill="url(#fill)" />
                <image xlink:href="/uploads/150701/electricwolf.jpg" width="100%" height="100%" />
            </g>
        </defs>

<rect width="100%" height="100%" fill="hsla(0,0%,0%,1)" />
        <g mask="url(#mask1)">
            <g>
                <use xlink:href="#image" transform="scale(1,16)" />
                <animateTransform attributeName="transform" type="translate" begin="0s" dur="16s" repeatCount="indefinite" from="0,-6000" to="0,0" />
            </g>
        </g>

<g mask="url(#mask2)">
            <use xlink:href="#image" />
        </g>
    </svg>
</div>