代码解读

 

　　定义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;

 

　　}






本文转载自中文网