使用SVG和CSS3滤镜实现的反乌托邦式（负能量）图像特效 - 踏得网

Dystopian SVG Filter. 反乌托邦风格指的是描述丑恶、黑暗、负面情绪等社会真实的不好的一面。

html5, 照片特效

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<svg width="0%" height="0%" xmlns="https://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="blue">
            <feGaussianBlur in="SourceGraphic" stdDeviation=".8" />
            <feConvolveMatrix preserveAlpha="true" kernelMatrix="-2 -2 -2
                        -2 16 -2
                        -2 -2 -2" />
            <filter id="EmbossFilter">
                <feConvolveMatrix order="5 5" preserveAlpha="true" kernelMatrix="-1 0 0 0 0 0 -2 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0" />
            </filter>

<feColorMatrix type="matrix" values="0  0  0  0  0
                0  .95  0  0  0
                0  1 0  0  0
                0  0  0  1  0" />

</filter>

<filter id="red">
            <feGaussianBlur in="SourceGraphic" stdDeviation=".8" />
            <feConvolveMatrix preserveAlpha="true" kernelMatrix="-2 -2 -2
                        -2 16 -2
                        -2 -2 -2" />
            <filter id="EmbossFilter">
                <filter id="EmbossFilter">
                    <feConvolveMatrix order="5 5" preserveAlpha="true" kernelMatrix="-1 0 0 0 0 0 -2 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0" />
                </filter>
            </filter>
            <feColorMatrix type="matrix" values="0  1  0  0  0
                0  0  0  0  0
                0  0  0  0  0
                0  0  0  1  0" />

</filter>

</defs>
</svg>

<div class="images">
    <div class="img1">
        <img src="/uploads/161001/normal2.jpg">
    </div>

<div class="img2">
        <img src="/uploads/161001/normal2.jpg">
    </div>

<div class="img3">
        <img src="/uploads/161001/normal2.jpg">
    </div>
</div>