效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/NBvrWL

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/czD3PhM

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 1 个内含 5 个 <span><div>

&lt;div class="container"&gt;
&lt;div class="hexagons"&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, gold, black);
}

定义圆形的外层容器的尺寸:

.container {
width: 20em;
height: 20em;
font-size: 20px;
border-radius: 50%;
}

在六边形容器中画出 1 个矩形:

.hexagons {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
} .hexagons span {
position: absolute;
width: calc(20em / 1.732);
height: inherit;
background-color: currentColor;
}

用伪元素再创建 2 个相同大小的矩形,一起组成一个六边形:

.hexagons span:before,
.hexagons span:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
background-color: currentColor;
} .hexagons span:before {
transform: rotate(60deg);
} .hexagons span:after {
transform: rotate(-60deg);
}

让六边形的颜色交错呈现:

.hexagons span:nth-child(odd) {
color: gold;
} .hexagons span:nth-child(even) {
color: #222;
}

设置变量,让六边形逐渐缩小,小六边形重叠在大六边形的上面:

.hexagons span {
transform: scale(var(--scale)) ;
} .hexagons span:nth-child(1) {
--scale: 1;
} .hexagons span:nth-child(2) {
--scale: calc(1 * 0.9);
} .hexagons span:nth-child(3) {
--scale: calc(1 * 0.9 * 0.9);
} .hexagons span:nth-child(4) {
--scale: calc(1 * 0.9 * 0.9 * 0.9);
} .hexagons span:nth-child(5) {
--scale: calc(1 * 0.9 * 0.9 * 0.9 * 0.9);
}

再设置变量,让六边形依次倾斜不同的角度:

.hexagons span {
transform: scale(var(--scale)) rotate(calc(var(--n) * 6deg));
} .hexagons span:nth-child(1) {
--n: 1;
} .hexagons span:nth-child(2) {
--n: 2;
} .hexagons span:nth-child(3) {
--n: 3;
} .hexagons span:nth-child(4) {
--n: 4;
} .hexagons span:nth-child(5) {
--n: 5;
}

定义动画效果:

.hexagons {
animation: twist 0.5s linear infinite;
} @keyframes twist {
from {
transform: rotate(0deg) scale(1);
} to {
transform: rotate(calc(6deg * -2)) scale(1.25);
}
}

隐藏容器外的内容:

.container {
overflow: hidden;
}

接下来用 d3 来批量创建六边形。
引入 d3 库:

&lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;

用 d3 创建六边形的 dom 元素:

const COUNT = 5;

d3.select('.hexagons')
.selectAll('span')
.data(d3.range(COUNT))
.enter()
.append('span');

用 d3 为六边形的 --n 和 --scale 变量赋值:

d3.select('.hexagons')
.selectAll('span')
.data(d3.range(COUNT))
.enter()
.append('span')
.style('--scale', (d) =&gt; Math.pow(0.9, d))
.style('--n', (d) =&gt; d + 1);

删除掉 html 文件中的六边形 dom 元素,和 css 文件中声明的变量。

最后,把六边形的数量改为 100 个:

const COUNT = 100;

大功告成!

原文地址:https://segmentfault.com/a/1190000015770017

如何用 CSS 和 D3 创作一个无尽的六边形空间的更多相关文章

  1. 如何用 CSS 和 D3 创作旋臂粒子动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJrOqd 可交互视频 ...

  2. 如何用 CSS 和 D3 创作火焰动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJdVxx 可交互视频 ...

  3. 前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJrOqd 可交互视频 此视频是可 ...

  4. 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...

  5. 如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 ...

  6. 如何用纯 CSS 和 D3 创作一只扭动的蠕虫

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QBQJMg 可交互视频 ...

  7. 前端每日实战:96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 此视频是可 ...

  8. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  9. 前端每日实战:133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eLMKJG 可交互视频 此视频是可 ...

随机推荐

  1. swift5 正则简单使用

    /* 判断是否价格 */ let money = "100.98" let parrern = "^\\d+(\\.\\d{0,2})?$" if NSPred ...

  2. Django-Rest-Framework的版本和认证

    Django-Rest-Framework的版本和认证   restful framework DRF的版本 版本控制是做什么用的,我们为什么要用 首先要知道版本是干嘛用的,我们知道开发项目的时候有多 ...

  3. 042 Trapping Rain Water 接雨水

    给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算下雨之后能接多少雨水.例如,输入 [0,1,0,2,1,0,1,3,2,1,2,1],返回 6. 详见:https://leetcode.c ...

  4. TDH-常见运维指令

    1.查看cpu: cat /proc/cpuinfo | grep processor2.查看磁盘:df -h (查看磁盘使用率) df -i (查看iNode使用) fdisk -l (查看磁盘整体 ...

  5. mysql非常全的和完整的总结

    (1)数据类型 类型 备注 tinyint/smallint/mediumint/int/bigint 1B/2B/3B/4B/8B float/double 单精度/双精度浮点型 decimal 不 ...

  6. 点权生成树(gentree)

    点权生成树(gentree) 题目背景 Awson是某国际学校信竞组的一只菜鸡.终于弄明白边权最小生成树后,然而又被大神嘲笑了.大神深邃的眼光中透露了些睿智,说道:“你会求点权最小生成树么?”Awso ...

  7. javascript 关于hashtable

    javascript 实现HashTable(哈希表) 一.javascript哈希表简介 javascript里面是没有哈希表的,一直在java,C#中有时候用到了这一种数据结构,javascrip ...

  8. JVM类加载机制一

    类加载的过程 什么是类加载?Java编译器会将我们编写好的代码编译成class字节码文件,JVM会把这些class字节码文件加载到内存中,并对加载的数据进行校验.准备.解析并初始化,这个过程就是类加载 ...

  9. where whereis locate find 的用法

    1.where :where ifconfig.用来搜索命令,显示命令是否存在以及路径在哪 2.whereis:whereis vim .用来搜索程序名,而且只搜索二进制文件(参数-b).man说明文 ...

  10. SpringBoot:异步开发之异步调用

    前言 除了异步请求,一般上我们用的比较多的应该是异步调用.通常在开发过程中,会遇到一个方法是和实际业务无关的,没有紧密性的.比如记录日志信息等业务.这个时候正常就是启一个新线程去做一些业务处理,让主线 ...