這篇文章帶給大家的內容是如何使用CSS線上字體和D3實現Google的資訊圖 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
效果預覽
原始碼下載
https://github.com/comehope/front-end-daily -challenges
程式碼解讀
定義dom，只有1 個空元素，其中不包含任何文字：
引入字體文件，Product Sans 是Google 專門為品牌推廣創建的無襯線字體：
@import url("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: 'product sans';
}登入後複製
定義顏色變數：
:root {
--blue: #4285f4;
--red: #ea4335;
--yellow: #fbbc05;
--green: #34a853;
}登入後複製
設定文字遮罩效果，為文字上色：
.logo::before {
background-image: linear-gradient(
to right,
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;
}登入後複製
至此，Google logo 製作完成，接下來製作googol 訊息，說明Google 的名字來自含義是1 後面跟100 個零的大數的單字googol。
在dom 中新增一行說明文字和容納數字的容器，容器中包含5 個數字，在每個數字的內聯樣式中指定了顏色變數：
<p>The name of Google originated from a misspelling of the word "googol", the number 1 followed by 100 zeros.</p>
<p>
<span>1</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>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;
}登入後複製
為數字上色：
.zeros span {
color: var(--c);
}登入後複製
微調數字"1" 的邊距，讓它不要和後面的"0" 靠得太緊：
.zeros span:nth-child(1) {
margin-right: 0.2em;
}登入後複製
至此，靜態佈局完成，接下來用d3 批量處理數字。
引入d3 函式庫，並刪除掉dom 中.zeros 的數字子元素：
最終我們會在頁面上顯示100 個0，每個0 的顏色都不同，為了美觀，相鄰數字的顏色也要不同。
所以，先定義一個獲取顏色的函數，它可以從Google logo 配色的4 種顏色中取任意一個顏色，並且有一個表示被排除顏色的參數，當指定的此參數時，就從4 個可選的顏色中去掉這個顏色，然後從剩下的3 個顏色中隨機取一個顏色：
function getColor(excludedColor) {
let colors = new Set(['blue', 'red', 'yellow', 'green'])
colors.delete(excludedColor)
return Array.from(colors)[Math.floor(d3.randomUniform(0, colors.size)())]
}登入後複製
然後，定義2 個常數，ZEROS 是儲存100 個0 的數組，ONE 是儲存數字1 的對象，它有2 個屬性，number 表示它的數值是1，color 表示它的顏色是藍色：
const ZEROS = d3.range(100).map(x=>0)
const ONE = {number: 1, color: 'blue'}登入後複製
接下來，透過用reduce 函數遍歷ZEROS 數組，傳回一個新的陣列numbers，它有101 個元素（1 以及跟隨它的100 個0），每個元素都是1 個包含number 和color 屬性的物件：
let numbers = ZEROS.reduce(function (numberObjects, d) {
numberObjects.push({
number: d,
color: getColor(numberObjects[numberObjects.length - 1].color)
})
return numberObjects
}, [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實現條紋錯覺的動畫效果（附原始碼）
CSS3文字特效屬性text-shadow的介紹，實例講解火焰文字效果#
以上是如何使用CSS線上字體和D3實現Google的資訊圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
