如何使用CSS在线字体和D3实现Google的信息图
导读：源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义dom，只有1个空元素，其中不包含任何文本： 引入字体文件，ProductSans...
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，只有1个空元素，其中不包含任何文本：
引入字体文件，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个数字，在每个数字的内联样式中指定了颜色变量：
ThenameofGoogleoriginatedfromamisspellingoftheword"googol",thenumber1followedby100zeros.
1
0
0
0
0
设置说明文本的样式：
.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的数字子元素：
最终我们会在页面上显示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;
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用CSS在线字体和D3实现Google的信息图
本文地址： https://pptw.com/jishu/664537.html