温馨提示×

温馨提示×

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

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

怎么用CSS和D3实现一组彩灯

发布时间:2022-02-24 15:01:13 来源:亿速云 阅读:171 作者:小新 栏目:web开发

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

  代码解读

  定义dom,容器中包含9个元素,代表9个数字:

  <divclass="pi">

  <span>3</span>

  <span>1</span>

  <span>4</span>

  <span>1</span>

  <span>5</span>

  <span>9</span>

  <span>2</span>

  <span>6</span>

  <span>5</span>

  </div>

  居中显示:

  body{

  margin:0;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  background-color:black;

  }

  定义容器尺寸:

  .pi{

  width:30em;

  height:30em;

  font-size:12px;

  }

  把9个数字布局成3*3的网格:

  .pi{

  display:grid;

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

  grid-gap:0.2em;

  }

  .pispan{

  color:white;

  font-size:3em;

  background-color:hsl(0,40%,40%);

  font-family:sans-serif;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  user-select:none;

  }

  在dom中定义css变量,变量值等于该元素代表的数字:

  <pclass="pi">

  <spanstyle="--d:3">3</span>

  <spanstyle="--d:1">1</span>

  <spanstyle="--d:4">4</span>

  <spanstyle="--d:1">1</span>

  <spanstyle="--d:5">5</span>

  <spanstyle="--d:9">9</span>

  <spanstyle="--d:2">2</span>

  <spanstyle="--d:6">6</span>

  <spanstyle="--d:5">5</span>

  </p>

  为不同的数字设置不同的背景色:

  .pispan{

  --c:hsl(calc(var(--d)*36),40%,40%);

  background-color:var(--c);

  }

  使数字的颜色与背景相同,在鼠标悬停时,高度当前的数字:

  .pispan{

  color:var(--c);

  transition:0.3s;

  }

  .pispan:hover{

  background-color:white;

  color:black;

  box-shadow:001emyellow;

  }

  至此,完成了视觉效果设计,接下来用d3批量处理dom元素和css变量。

  引入d3库:

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

  删除掉html文件中代表数字的dom元素,用d3创建代表数字的dom元素,并设置css变量:

  constPI='314159265';

  d3.select('.pi')

  .selectAll('span')

  .data(PI)

  .enter()

  .append('span')

  .style('--d',(d)=>d)

  .text((d)=>d);

  把PI改为100位:

  constPI='3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067';

  同时把网格改为10*10的布局:

  .pi{

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

  }

  .pispan{

  font-size:1.3em;

  }

  接下来制作循环点亮的效果。

  为各数字元素增加css类,数字0的类名是d0,数字1的类名是d2,以此类推:

  d3.select('.pi')

  .selectAll('span')

  .data(PI)

  .enter()

  .append('span')

  .attr('class',(d)=>`d${d}`)

  .style('--d',(d)=>d)

  .text((d)=>d);

  定义循环变量number,它从1开始逐渐递增:

  letnumber=1;

  定义一个函数,用于点亮特定数字的一组元素:

  functionshow(){

  d3.selectAll(`.pispan.d${number%10}`)

  .classed('show',true);

  d3.selectAll(`.pispan.d${(number-1)%10}`)

  .classed('show',false);

  number++;

  }

  最后,设置一个间隔时间,不断重复调用上面这个函数,让各组数字依次点亮:

  setInterval(show,500);



怎么用CSS和D3实现一组彩灯

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

向AI问一下细节

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

AI