如何用 CSS 和 D3 创作一个无尽的六边形空间
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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>
:
<div class="container">
<div class="hexagons">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
居中显示:
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 库:
<script src="https://d3js.org/d3.v5.min.js"></script>
用 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) => Math.pow(0.9, d))
.style('--n', (d) => d + 1);
删除掉 html 文件中的六边形 dom 元素,和 css 文件中声明的变量。
最后,把六边形的数量改为 100 个:
const COUNT = 100;
大功告成!
原文地址:https://segmentfault.com/a/1190000015770017
如何用 CSS 和 D3 创作一个无尽的六边形空间的更多相关文章
- 如何用 CSS 和 D3 创作旋臂粒子动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJrOqd 可交互视频 ...
- 如何用 CSS 和 D3 创作火焰动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJdVxx 可交互视频 ...
- 前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJrOqd 可交互视频 此视频是可 ...
- 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...
- 如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 ...
- 如何用纯 CSS 和 D3 创作一只扭动的蠕虫
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QBQJMg 可交互视频 ...
- 前端每日实战:96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 此视频是可 ...
- 如何用CSS和jQuery实现一个侧滑导航菜单
为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...
- 前端每日实战:133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eLMKJG 可交互视频 此视频是可 ...
随机推荐
- swift5 正则简单使用
/* 判断是否价格 */ let money = "100.98" let parrern = "^\\d+(\\.\\d{0,2})?$" if NSPred ...
- Django-Rest-Framework的版本和认证
Django-Rest-Framework的版本和认证 restful framework DRF的版本 版本控制是做什么用的,我们为什么要用 首先要知道版本是干嘛用的,我们知道开发项目的时候有多 ...
- 042 Trapping Rain Water 接雨水
给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算下雨之后能接多少雨水.例如,输入 [0,1,0,2,1,0,1,3,2,1,2,1],返回 6. 详见:https://leetcode.c ...
- TDH-常见运维指令
1.查看cpu: cat /proc/cpuinfo | grep processor2.查看磁盘:df -h (查看磁盘使用率) df -i (查看iNode使用) fdisk -l (查看磁盘整体 ...
- mysql非常全的和完整的总结
(1)数据类型 类型 备注 tinyint/smallint/mediumint/int/bigint 1B/2B/3B/4B/8B float/double 单精度/双精度浮点型 decimal 不 ...
- 点权生成树(gentree)
点权生成树(gentree) 题目背景 Awson是某国际学校信竞组的一只菜鸡.终于弄明白边权最小生成树后,然而又被大神嘲笑了.大神深邃的眼光中透露了些睿智,说道:“你会求点权最小生成树么?”Awso ...
- javascript 关于hashtable
javascript 实现HashTable(哈希表) 一.javascript哈希表简介 javascript里面是没有哈希表的,一直在java,C#中有时候用到了这一种数据结构,javascrip ...
- JVM类加载机制一
类加载的过程 什么是类加载?Java编译器会将我们编写好的代码编译成class字节码文件,JVM会把这些class字节码文件加载到内存中,并对加载的数据进行校验.准备.解析并初始化,这个过程就是类加载 ...
- where whereis locate find 的用法
1.where :where ifconfig.用来搜索命令,显示命令是否存在以及路径在哪 2.whereis:whereis vim .用来搜索程序名,而且只搜索二进制文件(参数-b).man说明文 ...
- SpringBoot:异步开发之异步调用
前言 除了异步请求,一般上我们用的比较多的应该是异步调用.通常在开发过程中,会遇到一个方法是和实际业务无关的,没有紧密性的.比如记录日志信息等业务.这个时候正常就是启一个新线程去做一些业务处理,让主线 ...