资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么使用CSS和D3实现黑白交叠的动画效果

这篇文章将为大家详细讲解有关怎么使用CSS和D3实现黑白交叠的动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联是一家专业从事成都网站建设、成都网站设计的网络公司。作为专业网站设计公司,成都创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站及网站设计开发服务!

代码解读

定义dom,容器中包含3个子元素,每个子元素代表一个圆:

居中显示:

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:black;

}

定义容器尺寸:

.circles{

width:60vmin;

height:60vmin;

}

画出容器中的1个圆:

.circles{

position:relative;

}

.circlesspan{

position:absolute;

box-sizing:border-box;

width:50%;

height:50%;

background-color:white;

border-radius:50%;

left:25%;

}

定义变量,画出多个圆,每个圆围绕着第1个圆的底部中点旋转,围成一个更大的圆形:

.circles{

--particles:3;

}

.circlesspan{

transform-origin:bottomcenter;

--deg:calc(360deg/var(--particles)*(var(--n)-1));

transform:rotate(var(--deg));

}

.circlesspan:nth-child(1){

--n:1;

}

.circlesspan:nth-child(2){

--n:2;

}

.circlesspan:nth-child(3){

--n:3;

}

为子元素增加动画效果:

.circlesspan{

animation:rotating5sease-in-outinfinite;

}

@keyframesrotating{

0%{

transform:rotate(0);

}

50%{

transform:rotate(var(--deg))translateY(0);

}

100%{

transform:rotate(var(--deg))translateY(100%)scale(2);

}

}

设置子元素混色模式,使子元素间交叠的部分显示成黑色:

.circlesspan{

mix-blend-mode:difference;

}

为容器增加动画效果,抵销子元素放大,使动画流畅衔接:

.circles{

animation:zoom5slinearinfinite;

}

@keyframeszoom{

to{

transform:scale(0.5)translateY(-50%);

}

}

接下来用d3批量处理dom元素和css变量。

引入d3库:

用d3为表示圆数量的变量赋值:

constCOUNT_OF_PARTICLES=30;

d3.select('.circles')

.style('--particles',COUNT_OF_PARTICLES)

用d3生成dom元素:

d3.select('.circles')

.style('--particles',COUNT_OF_PARTICLES)

.selectAll('span')

.data(d3.range(COUNT_OF_PARTICLES))

.enter()

.append('span');

用d3为表示子元素下标的变量赋值:

d3.select('.circles')

.style('--particles',COUNT_OF_PARTICLES)

.selectAll('span')

.data(d3.range(COUNT_OF_PARTICLES))

.enter()

.append('span')

.style('--n',(d)=>d+1);

删除掉html文件中的相关dom元素和css文件中相关的css变量。

最后,把圆的数量调整为30个:

constCOUNT_OF_PARTICLES=30;

大功告成!


怎么使用CSS和D3实现黑白交叠的动画效果怎么使用CSS和D3实现黑白交叠的动画效果

关于“怎么使用CSS和D3实现黑白交叠的动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站栏目:怎么使用CSS和D3实现黑白交叠的动画效果
文章出自:http://cdkjz.cn/article/pohcso.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220