小編給大家分享一下使用CSS在線字體和D3實現Google信息圖的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

隆昌ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！效果預覽

源代碼下載

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，只有 1 個空元素，其中不包含任何文本：

<div class="logo"></div>

引入字體文件，Product Sans 是 Google 專門為品牌推廣創(chuàng)建的無襯線字體：

@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 class="desc">The name of Google originated from a misspelling of the word "googol", the number 1 followed by 100 zeros.</p> 
<p class="zeros">
    <span style="--c:var(--blue);">1</span>
    <span style="--c:var(--red);">0</span>
    <span style="--c:var(--yellow);">0</span>
    <span style="--c:var(--blue);">0</span>
    <span style="--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;
}

為數字上色：

.zeros span {
    color: var(--c);
}

微調數字"1"的邊距，讓它不要和后面的"0"靠得太緊：

.zeros span:nth-child(1) {
    margin-right: 0.2em;
}

至此，靜態(tài)布局完成，接下來用 d3 批量處理數字。

引入 d3 庫，并刪除掉 dom 中.zeros的數字子元素：

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

最終我們會在頁面上顯示 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 批量創(chuàng)建出 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信息圖的方法有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯網站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：使用CSS在線字體和D3實現Google信息圖的方法-創(chuàng)新互聯
本文URL：http://www.sd-ha.com/article21/dopojd.html

成都網站建設公司_創(chuàng)新互聯，為您提供企業(yè)網站制作、外貿建站、動態(tài)網站、標簽優(yōu)化、微信公眾號、搜索引擎優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯