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

发布时间:2022-03-02 14:50:51 作者:小新
来源:亿速云 阅读:121

小编给大家分享一下怎么使用CSS和D3实现一个舞动的画面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  代码解读

  定义dom,容器中包含1个.square子容器,子容器中包含4个<span>,每个<span>代表一个对角扇形:

  <figureclass="container">

  <divclass="square">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </div>

  </figure>

  居中显示:

  body{

  margin:0;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  background-color:#222;

  }

  设置容器的尺寸单位,1em等于8px:

  .container{

  font-size:8px;

  }

  子容器中的4个<span>不设宽高,只设边框,其中第1个和第4个<span>只取左右边框,第2个和第3个<span>只取上下边框:

  .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个<span>设置为2*2的网格:

  .square{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  grid-gap:0.2em;

  padding:0.1em;

  }

  旋转4个<span>,使它们围合成一个正方形,看起来像一个花朵,算式的结果是45度,写成这样是为了和接下来的动画的算式的形式保持一致:

  .squarespan{

  transform:rotate(calc(45deg+90deg*0));

  }

  增加让<span>旋转的动画,整个动画过程旋转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个<span>朝相反的方向运动:

  .squarespan:nth-child(2),

  .squarespan:nth-child(3){

  animation-direction:reverse;

  }

  至此,一个.square子容器的动画已经完成,接下来制作4个.square的动画。

  在dom中再增加3组.square子容器:

  <figureclass="container">

  <divclass="square">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </div>

  <divclass="square">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </div>

  <divclass="square">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </div>

  <divclass="square">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </div>

  </figure>

  用grid布局把4个.square布局成网格状,变量--columns是网格的边长,即每边有2个.square子容器:

  .container{

  display:grid;

  --columns:2;

  grid-template-columns:repeat(var(--columns),1fr);

  }

  现在看起来好像是有几个黑色的小方块在不停地移动,当dom元素越多时,动画效果看起来就越壮观,就像集体舞一样,人越多越有气势。接下来用d3批量增加dom的元素。

  引入d3库:

  <scriptsrc="https://d3js.org/d3.v5.min.js"></script>

  声明一个COLUMNS常量,表示网格的边长:

  constCOLUMNS=2;

  删除掉html文件中的.square子元素,改为用d3动态创建:

  d3.select('.container')

  .selectAll('p')

  .data(d3.range(COLUMNS*COLUMNS))

  .enter()

  .append('p')

  .attr('class','square');

  继续用连缀语法增加<span>子元素:

  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实现一个舞动的画面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 使用CSS和D3实现一个舞动画面的方法
  2. 怎么使用D3和GSAP实现一个舞动的效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css d3

上一篇:怎么仅使用CSS禁用链接

下一篇:怎么使用CSS的!important改变优先级

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》