這篇文章帶給大家的內容是如何使用CSS線上字體和D3實現Google的資訊圖 ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
https://github.com/comehope/front-end-daily -challenges
定義dom,只有1 個空元素,其中不包含任何文字:
<div></div>
引入字體文件,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
的數字子元素:
<script></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 批次建立出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; }
大功告成!
相關推薦:
CSS3文字特效屬性text-shadow的介紹,實例講解火焰文字效果#以上是如何使用CSS線上字體和D3實現Google的資訊圖的詳細內容。更多資訊請關注PHP中文網其他相關文章!