使用D3.js实现的扭曲引力场动画特效

可用来模拟一些物理结构的形变效应。

d3.js, 物理

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var xCount = 100;
var yCount = 100;
var gridSize = 1024;
var width = window.innerWidth;
var height = window.innerHeight;
var radius = 150;
var ramp = .7;

function rnd(min, max) {
    return min + Math.random() * (max - min);
}

var svg = d3.select("#container").append("svg").attr("width", width).attr("height", height).append('g');

var line = d3.svg.line().x(function(d) {
    return d.x + d.velocity.x;
}).y(function(d) {
    return d.y + d.velocity.y;
});

var grids = svg.selectAll('g').data(data).enter().append('g');

var nodes = grids.append('path').attr('d', line).style("stroke", 'hsla(' + rnd(78, 186) + ',' + rnd(50, 90) + '%,50%,.5)');

var Attractor = function Attractor() {};

Attractor.prototype.attract = function(node, _x, _y, _strength) {
    var x = _x;
    var y = _y;
    var strength = _strength;
    var dx = x - node.x;
    var dy = y - node.y;

var d = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));

if (d > 0 && d < radius) {
        var s = Math.pow(d / radius, 3 / ramp);
        var f = s * 9 * strength * (1 / (s + 1.01) + (s - 3) / 4) / d;
        node.velocity.x += dy * f;
        node.velocity.y -= dx * f;
    }
};

var myAttractor = new Attractor();

d3.timer(update);

编译

CSS

html {
    background: -webkit-radial-gradient(circle, rgba(85, 46, 184, 0.9) 1%, #0b0613 100%);
    background: radial-gradient(circle, rgba(85, 46, 184, 0.9) 1%, #0b0613 100%);
    overflow: hidden;
    width: 100%;
    height: 100%;
    mix-blend-mode: xor;
}
#bg {
    background-image: url(/uploads/161001/grille4.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 60% center;
    -webkit-animation: bg 67s cubic-bezier(1, -3.57997, 0.05, 4) infinite alternate;
    animation: bg 67s cubic-bezier(1, -3.57997, 0.05, 4) infinite alternate;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}
@-webkit-keyframes bg {
    15% {
        opacity: .05;
    }
    40% {
        opacity: .2;
    }
    50% {
        -webkit-filter: invert(1) blur(10px);
        filter: invert(1) blur(10px);
        opacity: .24;
    }
    60% {
        opacity: .2;
    }
    95% {
        opacity: .05;
        mix-blend-mode: screen;
    }
}
@keyframes bg {
    15% {
        opacity: .05;
    }
    40% {
        opacity: .2;
    }
    50% {
        -webkit-filter: invert(1) blur(10px);
        filter: invert(1) blur(10px);
        opacity: .24;
    }
    60% {
        opacity: .2;
    }
    95% {
        opacity: .05;
        mix-blend-mode: screen;
    }
}
path {
    fill: rgba(176, 161, 247, 0.1);
    -webkit-animation: color 12s cubic-bezier(1, -0.26903, 0.3, 0.74677) infinite;
    animation: color 12s cubic-bezier(1, -0.26903, 0.3, 0.74677) infinite;
    mix-blend-mode: difference;
}
@-webkit-keyframes color {
    40% {
        fill: rgba(160, 248, 243, 0.2);
    }
    65% {
        fill: rgba(251, 230, 208, 0.2);
    }
}
@keyframes color {
    40% {
        fill: rgba(160, 248, 243, 0.2);
    }
    65% {
        fill: rgba(251, 230, 208, 0.2);
    }
}
#container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 49%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

HTML

可用来模拟一些物理结构的形变效应。

d3.js, 物理

编辑器支持Emmet

快捷键

可用来模拟一些物理结构的形变效应。

d3.js, 物理

使用D3.js和SVG实现的随机树枝和树叶生长动画

使用matter.js实现的浏览器崩溃元素掉落动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：