重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么使用CSS和D3实现一个舞动的画面
小编给大家分享一下怎么使用CSS和D3实现一个舞动的画面，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联公司坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。10多年网站建设经验成都创新互联公司是成都老牌网站营销服务商,为您提供网站设计、网站建设、网站设计、H5建站、网站制作、高端网站设计、重庆小程序开发服务,给众多知名企业提供过好品质的建站服务。
代码解读
定义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子容器：
