我试图重现这种效果
http://codepen.io/anon/pen/ojvMNX
@mixin foggy-background($x, $y) {
background:
radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 40%) 400px+$x*3 300px+$y*2 no-repeat,
radial-gradient(ellipse at center, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%) 0px+$x*3 0px+$y*2 no-repeat,
radial-gradient(ellipse at center, rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 50%) 50px+$x*2 300px+$y no-repeat,
radial-gradient(ellipse at center, rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 40%) -200px+$x -150px+$y no-repeat,
#000;
}
@keyframes animate {
// with a bit more love you can get better results :)
0% {
@include foggy-background(-400, -300);
}
100% {
@include foggy-background(200, 500);
}
}
在我的网站中使用掩码而不是文本，但我自己的SVG，这就是我得到的：
https://jsfiddle.net/6xhca8mu/1/
<svg version="1.1" id="magritte" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-461 463 100 100"xml:space="preserve">
<path fill="#FFF" d="M-381.1,523.6l-2-5.2l0,0l-4.7-3.7L-398,511l-7.4-7.4l-0.3-2l1.4-2.9l0,0l-0.3-3.1l1.9-1.4l1-6.6v-0.1l-0.8-1
l-1.1,0.4l0.2-0.7l1.3-0.1l2.8-1.4l1.5-1.6l-2.1-1.2h-0.1l-2.6,1.1l-0.9-0.6l-1.5-10.9l0,0l-1.7-1.8h-13.1l-1.2,1.1l-2.2,8.8h-0.9
l1.1,2.1l-0.5,1.5l-4.1-0.6l-1.5,1.5l2.3,1.5l4.1,1.6l-0.2,0.5l-1.4-0.8l0.6,5.1l0,0l1.8,2.7l0.4,4.7l0,0l1.5,2l-0.7,1.9l-6.1,7.1
l-8.6,3.2l0,0l-4,4.8l-3.3,7.6l0.1,8h0.1l-0.1,0.1l11.1,6.4l12.3,16l5.8-13.1l0.6-18.7l5-8.6l1.4-4.2l0,0l1-3.1v-1.1l0,0v-0.1v-0.2
l0,0v-3.5l7.2,7.4l10.3,3.5l4.6,3.6l2,5.2l1.8,15.4h0.2L-381.1,523.6z M-409,511.8l-3.6-0.1l2.4-3.7l1,3.3l0,0L-409,511.8z
M-409,511l-1-3.2l4.2-2.1l0.2-1v2.8L-409,511z M-403.7,486L-403.7,486L-403.7,486l-3.8,0.5l-2.2-2l0,0l-1.8,0.1l-0.1-2h3.5l4.9,3.3
L-403.7,486z M-420.7,487.3l3.8-2.6h2l-0.2,1.9l-1.1,1.9l-1,0.8c-0.3,0.2-0.7,0.5-1,0.8l-0.8,0.5l-2.8,0.2l1-1.5L-420.7,487.3z
M-414.1,479.8l0.6-0.6l0.4,2.1l-0.6,4.1l0.2-4l0,0L-414.1,479.8z M-413.1,483.3l0.2,0.6l0,0l0,0l1.4,4.4c-0.6-0.2-1.3-0.3-1.9-0.3
c-0.1,0-0.3,0-0.4,0L-413.1,483.3z M-413,482.9l0.2-1.2l0.9,1l0.1,1.9l-0.9-0.7L-413,482.9L-413,482.9z M-414.1,488.1
c-0.7,0.1-1.4,0.2-2,0.5l1.2-1.9l0.3-2.1l0.9-1.3L-414.1,488.1z M-418,490.2l1-0.8c1.1-0.7,2.3-1.1,3.7-1.1c3.7,0,6.7,3,6.7,6.7
s-3,6.7-6.7,6.7c-3.7,0-6.7-3-6.7-6.7C-420.1,493.1-419.3,491.4-418,490.2z M-411.2,488.4L-411.2,488.4l-1.3-4.2l0.8,0.6v0.1
l1.9-0.1l2.2,2l2.2,2.3l0.8,3.1h-2.5C-407.9,490.4-409.4,489-411.2,488.4z M-420.8,470.9l1.1-1.1h12.9l1.6,1.7l1.5,11l1.1,0.7
l2.5-1.1l1.8,1l-1.3,1.4l-2.7,1.4h-0.5l-5.3-3.5l0,0h-3.6l-1.1-1.1l-0.5-2.5l-1.1,0.9l0.7,1.7l-1.3,1.2l-4.8-2.1l-3.2-0.8
L-420.8,470.9z M-423.7,479.9h0.5l3.3,0.9l3.9,1.7l-2.3,1.8l-3.4-0.9l-1.1-1.6L-423.7,479.9z M-426.7,485.4l-2-1.3l1.2-1.2l4.2,0.6
l0.5-1.4l0.9,1.6l3.7,0.9l2.5-2l0,0l0.7,0.3l1.3-1.1l-0.1,1.2l-0.1-0.1l-1,1.5h-2.2l-3.9,2.6h-1.5L-426.7,485.4z M-419.6,501.4
l-1.5-2l-0.5-4.8l0,0l-1.8-2.5l-0.5-4.7l1,0.7l0.4-0.8l1.5,0.1l-0.1,1.9l-1.2,1.9l3.3-0.2c-0.9,1.2-1.4,2.6-1.4,4.2c0,3.8,3.1,7,7,7
c3.8,0,7-3.1,7-7c0-0.9-0.2-1.8-0.5-2.7h2.7l-0.9-3.5l-2.1-2.2l3.4-0.5l-0.2,1l1.4-0.6l0.7,0.8l-1,6.4l-2,1.4l0.3,3.3l-1.4,2.8
l0.4,2.3l-0.4,1.8l-4.2,2.1l-2.3,3.7l-1.7-3.4l-3.9-1.3l-2.3-3.2L-419.6,501.4z M-415.6,511.1l1.3-2.7l1.5,3.3l0,0l-3.5,0.6
L-415.6,511.1L-415.6,511.1z M-420.5,503.8l2.2,3.1l3.8,1.3l-1.4,2.8l-2.3-1l-1.4-2l-1-3.9L-420.5,503.8z M-420.8,504.1l1,4l0.6,3
l-4.5,7.5l-2.9-8L-420.8,504.1z M-413,524.5l-18.2,15.5l3.7-14.7l8.3-13.8L-413,524.5z M-418.8,511.8l1.9,1.7l2.8,0.9l0.4,2.3
l-1,3.7L-418.8,511.8z M-439.4,518.7l4-4.7l8.5-3.2l2.9,8.2l-3.7,6.1l-14.7,0.8L-439.4,518.7z M-442.4,533.9l-0.1-7.8l14.7-0.8
l-3.7,14.8L-442.4,533.9z M-419.3,555.9l-11.9-15.5l9.1-7.7l8.3,10.7L-419.3,555.9z M-413.7,543l-8.2-10.6l8.9-7.6L-413.7,543z
M-408,516l-2,3.5l-1.4-2.9l0.3-2.1l3.3-1.3l1.1-1L-408,516z M-405.6,508.7l-1,3l-1.4,1.3l-3.4,1.4l-0.3,2.3l1.5,3l-2.6,4.5
l-1.6-3.4l1.1-4.1l-0.5-2.5l-2.9-0.9l-2.3-2.1l-0.5-2.6l1.1,1.6l2.4,1l-0.8,1.4l4-0.7l4.2,0.1l-0.3-0.8l3.3-3.3
C-405.6,507.9-405.6,508.7-405.6,508.7z"/>
</svg>
我该如何解决这个问题？非常感谢您的回复。