文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用CSS在线字体和D3实现Google的信息图

2024-04-02 19:55

关注

这篇文章给大家分享的是有关怎么用CSS在线字体和D3实现Google的信息图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

  代码解读

  定义dom,只有1个空元素,其中不包含任何文本:

  <divclass="logo"></div>

  引入字体文件,ProductSans是Google专门为品牌推广创建的无衬线字体:

  @importurl("https://fonts.googleapis.com/css?family=Product+Sans");

  居中显示:

  body{

  margin:0;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  }

  用伪元素制作logo,注意content的内容不是"Google",而是"google_logo":

  .logo::before{

  content:'google_logo';

  font-size:10vw;

  }

  设置字体,采用刚才引入的在线字体,刚才页面上的"google_logo"文字被替换成了单色的logo图案:

  body{

  font-family:'productsans';

  }

  定义颜色变量:

  :root{

  --blue:#4285f4;

  --red:#ea4335;

  --yellow:#fbbc05;

  --green:#34a853;

  }

  设置文字遮罩效果,为文字上色:

  .logo::before{

  background-image:linear-gradient(

  toright,

  var(--blue)0%,var(--blue)26.5%,

  var(--red)26.5%,var(--red)43.5%,

  var(--yellow)43.5%,var(--yellow)61.5%,

  var(--blue)61.5%,var(--blue)78.5%,

  var(--green)78.5%,var(--green)84.5%,

  var(--red)84.5%,var(--red)100%

  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

  }

  至此,Googlelogo制作完成,接下来制作googol信息,说明Google的名字来源于含义是1后面跟100个零的大数的单词googol。

  在dom中添加一行说明文本和容纳数字的容器,容器中包含5个数字,在每个数字的内联样式中指定了颜色变量:

  <pclass="desc">ThenameofGoogleoriginatedfromamisspellingoftheword"googol",thenumber1followedby100zeros.</p>

  <pclass="zeros">

  <spanstyle="--c:var(--blue);">1</span>

  <spanstyle="--c:var(--red);">0</span>

  <spanstyle="--c:var(--yellow);">0</span>

  <spanstyle="--c:var(--blue);">0</span>

  <spanstyle="--c:var(--green);">0</span>

  </p>

  设置说明文本的样式:

  .desc{

  font-size:1.5vw;

  font-weight:normal;

  color:dimgray;

  margin-top:2em;

  }

  设置数字的样式:

  .zeros{

  font-size:3vw;

  font-weight:bold;

  margin-top:0.2em;

  text-align:center;

  width:25.5em;

  word-wrap:break-word;

  }

  为数字上色:

  .zerosspan{

  color:var(--c);

  }

  微调数字"1"的边距,让它不要和后面的"0"靠得太紧:

  .zerosspan:nth-child(1){

  margin-right:0.2em;

  }

  至此,静态布局完成,接下来用d3批量处理数字。

  引入d3库,并删除掉dom中.zeros的数字子元素:

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

  最终我们会在页面上显示100个0,每个0的颜色都不同,并且为了美观,相邻数字的颜色也要不同。

  所以,先定义一个获取颜色的函数,它可以从Googlelogo配色的4种颜色中取任意一个颜色,并且有一个表示被排除颜色的参数,当指定的此参数时,就从4个可选的颜色中去掉这个颜色,然后从剩下的3个颜色中随机取一个颜色:

  functiongetColor(excludedColor){

  letcolors=newSet(['blue','red','yellow','green'])

  colors.delete(excludedColor)

  returnArray.from(colors)[Math.floor(d3.randomUniform(0,colors.size)())]

  }

  然后,定义2个常量,ZEROS是存储100个0的数组,ONE是存储数字1的对象,它有2个属性,number表示它的数值是1,color表示它的颜色是蓝色:

  constZEROS=d3.range(100).map(x=>0)

  constONE={number:1,color:'blue'}

  接下来,通过用reduce函数遍历ZEROS数组,返回一个新的数组numbers,它有101个元素(1以及跟随它的100个0),每个元素都是1个包含number和color属性的对象:

  letnumbers=ZEROS.reduce(function(numberObjects,d){

  numberObjects.push({

  number:d,

  color:getColor(numberObjects[numberObjects.length-1].color)

  })

  returnnumberObjects

  },[ONE])

  然后,以numbers为数据源,用d3批量创建出dom元素,并且把颜色信息写在行内样式中:

  d3.select('.zeros')

  .selectAll('span')

  .data(numberObjects)

  .enter()

  .append('span')

  .style('--c',(d)=>`var(--${d.color})`)

  .text((d)=>d.number)

  最后,微调一下内容的边距,使整个内容居中:

  .logo{

  margin-top:-10vh;

  }

怎么用CSS在线字体和D3实现Google的信息图怎么用CSS在线字体和D3实现Google的信息图

感谢各位的阅读!关于“怎么用CSS在线字体和D3实现Google的信息图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯