HTML5 SVG 海底世界（浮游生物）/水下环境特效

Nightly Sea Creatures 双击生成海底生物。海底的光影水流波动特效使用SVG的feTurbulence实现。

svg，water

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3604
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* because me lazy */
Object.getOwnPropertyNames(Math).map(function(p) {
    window[p] = Math[p];
});

var rand = function(min, max, isInt) {
    var max = ((max - 1) || 0) + 1,
        min = min || 0,
        gen = min + (max - min) * random();

return (isInt) ? (~~gen) : gen;
};

var σ = function() {
    return (random() < .5) ? -1 : 1;
};

Node.prototype.setAttrs = function(attr_obj) {
    for (var prop in attr_obj) {
        this.setAttribute(prop, attr_obj[prop]);
    }
};

var BF_MIN = .01,
    NO_MIN = 2,
    BF_MAX = .02,
    NO_MAX = 8,
    BASE = '/uploads/151001/ccc_15.08.21_sea_creatures_',
    EXT = '.gif',
    PRIMARY = [{
        'fix': null,
        'dir': -1
    }, {
        'fix': 1,
        'dir': null
    }, {
        'fix': null,
        'dir': 1
    }, {
        'fix': null,
        'dir': null
    }, {
        'fix': 0,
        'dir': -1
    }, ],
    N_PRIMARY = PRIMARY.length,

w, h,
    creatures = [],
    n = 0,
    fe_t = document.getElementById('turbulence'),
    curr_bf = 1 * fe_t.getAttribute('baseFrequency'),
    curr_no = ~~fe_t.getAttribute('numOctaves'),
    bf_step = .0001,
    no_step = .002,
    t = 0,
    r_id_bg = null,
    r_id_fish = null,
    t = 0;

var Creature = function(x, y) {
    this.idx = rand(N_PRIMARY, 0, 1);
    this.prim = PRIMARY[this.idx];
    this.x = x || rand(w, 0, 1);
    this.y =
        (this.prim.fix === null) ?
        (y || rand(h, 0, 1)) :
        this.prim.fix * h;
    this.el = document.createElement('div');
    this.img = document.createElement('img')
    this.rev = round(random());
    this.dir = pow(-1, this.rev) * ((this.prim.dir !== null) ? this.prim.dir : σ());
    this.sf = 1 * (rand(1, .56).toFixed(2));
    this.hue = rand(360, 0, 1);
    this.v = this.dir * rand(8, 1, 1);
    this.f = 1 / rand(120, 60, 1);

this.init = function() {
        var filter = 'hue-rotate(' + this.hue + 'deg) brightness(.5)';

this.img.setAttribute('src', BASE + this.idx + EXT);

this.img.style.transform =
            'translate(-50%, -50%)' +
            'scale(' + pow(-1, this.rev) * this.sf + ',' + this.sf + ')' +
            ((this.prim.fix !== null) ?
                'translate(0, ' + pow(-1, this.prim.fix) * 50 + '%)' : '');
        this.img.style.webkitFilter = filter;
        this.img.style.filter = filter;

this.position();

this.el.appendChild(this.img);

document.body.appendChild(this.el);
    };

this.position = function() {
        this.el.style.transform =
            'translate(' + this.x + 'px,' + this.y + 'px)';
    };

this.move = function() {
        this.x += this.v * (1 + .75 * sin(t * 2 * PI * this.f));

if (this.x < -w) {
            this.x = 2 * w
        }
        if (this.x > 2 * w) {
            this.x = -w;
        }

this.position();
    };

this.init();;
};

var init = function() {
    size();
};

var size = function() {
    var s = getComputedStyle(document.body);

w = ~~s.width.split('px')[0];
    h = ~~s.height.split('px')[0];
};

var life = function() {
    for (var i = 0; i < n; i++) {
        creatures[i].move();
    }

t++;
    r_id_fish = requestAnimationFrame(life);
};

var alterFilter = function() {
    curr_bf += bf_step;
    curr_no += no_step;

if (curr_bf < BF_MIN || curr_bf > BF_MAX) {
        bf_step *= -1;
    }
    if (curr_no < NO_MIN || curr_no > NO_MAX) {
        no_step *= -1;
    }

fe_t.setAttrs({
        'baseFrequency': curr_bf.toFixed(4)
            /*, 
            			'numOctaves': curr_no.toFixed(3)*/
    });

r_id_bg = requestAnimationFrame(alterFilter);
};

init();
alterFilter();

addEventListener('resize', size, false);
addEventListener('dblclick', function(e) {
    creatures.push(new Creature(e.clientX, e.clientY));
    n++;
    if (n === 1) {
        life();
    }
}, false);

编译

CSS

html,
body {
    height: 100%;
}
html {
    overflow: hidden;
    background: #000;
}
html:before {
    position: absolute;
    z-index: -1;
    top: -8em;
    right: -8em;
    bottom: -8em;
    left: -8em;
    opacity: 0.5;
    background: url(/uploads/151001/ccc_15.08.21_bg.jpg) 50% 25%/cover;
    -webkit-filter: url(#f);
    filter: url(#f);
    animation: rot 3.2s ease-in-out infinite alternate;
    content: '';
}
html:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: inset 0 0 1em 0.5em #0d5378, inset 0 0 1.5em 0.5em #0d5378;
    content: '';
}
@keyframes rot {
    from {
        transform: rotate(-1deg);
    }
    to {
        transform: rotate(1deg);
    }
}
body {
    margin: 0;
}
div,
img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-user-select: none;
}
img {
    -webkit-filter: blur(1px) drop-shadow(0 0 1px #fff);
    filter: blur(1px) drop-shadow(0 0 1px #fff);
    transform: translate(-50%, -50%);
}

HTML

Nightly Sea Creatures 双击生成海底生物。海底的光影水流波动特效使用SVG的feTurbulence实现。

svg，water

编辑器支持Emmet

快捷键

Nightly Sea Creatures 双击生成海底生物。 海底的光影水流波动特效使用SVG的feTurbulence实现。

svg，water

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Nightly Sea Creatures 双击生成海底生物。海底的光影水流波动特效使用SVG的feTurbulence实现。