D3.js 很棒的一个图片块状化交互动效

鼠标悬停会改变图片表面的块状布局。思路是在图片上覆盖一个SVG矢量图。

d3, 图片特效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const svg = d3.select('svg').on('touchmove mousemove', moved);
const $overlay = document.getElementsByClassName('overlay')[0];
const Bounds = {
  width: 384,
  height: 384,
};

const sites = d3.range(20)
                .map(d => [Math.random() * Bounds.width, Math.random() * Bounds.height]);

const voronoi = d3.voronoi()
                  .extent([[-1, -1], [Bounds.width + 1, Bounds.height + 1]]);

let polygon = svg.append('g')
                 .attr('class', 'polygons')
                 .attr('id', 'polygon')
                 .selectAll('path')
                 .data(voronoi.polygons(sites))
                 .enter().append('path')
                 .call(redrawPolygon);

let site = svg.append('g')
              .attr('class', 'sites')
              .selectAll('circle')
              .data(sites)
              .enter().append('circle')
              .attr('r', 2.5)
              .call(redrawSite);

function redraw() {
  const diagram = voronoi(sites);
  polygon = polygon.data(diagram.polygons()).call(redrawPolygon);
  site = site.data(sites).call(redrawSite);
}

function redrawPolygon(polygon) {
  polygon.attr('d', d => d ? "M" + d.join('L') + 'Z' : null);
}

function redrawSite(site) {
  site.attr('cx', d => d[0]);
  site.attr('cy', d => d[1]);
}

编译

CSS

html,
body {
  height: 100%;
  width: 100%;
}
body {
  background-color: #fbfbfb;
  position: relative;
  -webkit-perspective: 900;
          perspective: 900;
}
.overlay {
  border: 5px solid #000;
  border-radius: 100%;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 384px;
  width: 384px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
  -webkit-animation: scale 2000ms ease;
          animation: scale 2000ms ease;
}
svg {
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 384px;
  width: 384px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url("https://static.pexels.com/photos/16516/pexels-photo-large.jpg");
  background-size: contain;
  background-origin: center center;
}
svg .polygons {
  fill: none;
  stroke: #000;
}
svg .polygons :first-child {
  fill: #ffce00;
  opacity: 0.25;
}
svg .sites {
  fill: none;
  stroke: none;
}
svg .sites :first-child {
  fill: #ffce00;
}
.link {
  color: #555;
  bottom: 12px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  position: fixed;
  right: 12px;
}
.link a {
  color: #555;
}
.link .heart {
  font-family: none;
  color: #e1264c;
}
@-webkit-keyframes scale {
  0% {
    height: 0;
    width: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-720deg);
            transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-720deg);
  }
  50% {
    height: 384px;
    width: 384px;
  }
  100% {
    height: 384px;
    width: 384px;
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
            transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  }
}
@keyframes scale {
  0% {
    height: 0;
    width: 0;
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-720deg);
            transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-720deg);
  }
  50% {
    height: 384px;
    width: 384px;
  }
  100% {
    height: 384px;
    width: 384px;
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
            transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  }
}
/* NO-BEAUTIFY */

HTML

鼠标悬停会改变图片表面的块状布局。思路是在图片上覆盖一个SVG矢量图。

d3, 图片特效

编辑器支持Emmet

快捷键

鼠标悬停会改变图片表面的块状布局。思路是在图片上覆盖一个SVG矢量图。

d3, 图片特效

D3.js 带虚线延伸提示的弹性环状饼图

使用D3.js实现的散点图可视化

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：