如何使用CSS和D3实现一个舞动的画面
导读：源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义dom，容器中包含1个.square子容器，子容器中包含4个，每个代表一个对角扇形：...
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器中包含1个.square子容器，子容器中包含4个，每个代表一个对角扇形：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#222;
}
设置容器的尺寸单位，1em等于8px：
.container{
font-size:8px;
}
子容器中的4个不设宽高，只设边框，其中第1个和第4个只取左右边框，第2个和第3个只取上下边框：
.squarespan{
display:block;
border:2.5emsolidtransparent;
color:#ddd;
}
.squarespan:nth-child(1),
.squarespan:nth-child(4){
border-left-color:currentColor;
border-right-color:currentColor;
}
.squarespan:nth-child(2),
.squarespan:nth-child(3){
border-top-color:currentColor;
border-bottom-color:currentColor;
}
把边框改为圆弧：
.squarespan{
border-radius:50%;
}
在子容器中用grid布局把4个设置为2*2的网格：
.square{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-gap:0.2em;
padding:0.1em;
}
旋转4个，使它们围合成一个正方形，看起来像一个花朵，算式的结果是45度，写成这样是为了和接下来的动画的算式的形式保持一致：
.squarespan{
transform:rotate(calc(45deg+90deg*0));
}
增加让旋转的动画，整个动画过程旋转4次，每次旋转90度，4次旋转之后即返回原位：
.squarespan{
animation:rotation2sease-in-outinfinite;
}
@keyframesrotation{
0%{
transform:rotate(calc(45deg+90deg*0));
}
25%{
transform:rotate(calc(45deg+90deg*1));
}
50%{
transform:rotate(calc(45deg+90deg*2));
}
75%{
transform:rotate(calc(45deg+90deg*3));
}
100%{
transform:rotate(calc(45deg+90deg*4));
}
}
使其中2个朝相反的方向运动：
.squarespan:nth-child(2),
.squarespan:nth-child(3){
animation-direction:reverse;
}
至此，一个.square子容器的动画已经完成，接下来制作4个.square的动画。
在dom中再增加3组.square子容器：
用grid布局把4个.square布局成网格状，变量--columns是网格的边长，即每边有2个.square子容器：
.container{
display:grid;
--columns:2;
grid-template-columns:repeat(var(--columns),1fr);
}
现在看起来好像是有几个黑色的小方块在不停地移动，当dom元素越多时，动画效果看起来就越壮观，就像集体舞一样，人越多越有气势。接下来用d3批量增加dom的元素。
引入d3库：
声明一个COLUMNS常量，表示网格的边长：
constCOLUMNS=2;
删除掉html文件中的.square子元素，改为用d3动态创建：
d3.select('.container')
.selectAll('p')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('p')
.attr('class','square');
继续用连缀语法增加子元素：
d3.select('.container')
.selectAll('p')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('p')
.attr('class','square')
.selectAll('span')
.data(d3.range(4))
.enter()
.append('span');
删除掉css文件中的--columns变量声明，改为用d3动态声明：
d3.select('.container')
.style('--columns',COLUMNS)
/*略*/
最后，把边长改为4，即让16个.square一起动画：
constCOLUMNS=4;
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用CSS和D3实现一个舞动的画面
本文地址： https://pptw.com/jishu/664468.html