大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么使用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子容器:

用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;


怎么使用CSS和D3实现一个舞动的画面

以上是“怎么使用CSS和D3实现一个舞动的画面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文题目:怎么使用CSS和D3实现一个舞动的画面
当前地址:http://dzwzjz.com/article/pcjeph.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP