摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。引入庫,并刪除掉中的數字子元素最終我們會在頁面上顯示個,每個的顏色都不同,并且為了美觀,相鄰數字的顏色也要不同。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/xaPZye
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cwkpGf9
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
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 個數字,在每個數字的內聯樣式中指定了顏色變量:
The name of Google originated from a misspelling of the word "googol", the number 1 followed by 100 zeros.
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; }
為數字上色:
.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; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113901.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。引入庫,并刪除掉中的數字子元素最終我們會在頁面上顯示個,每個的顏色都不同,并且為了美觀,相鄰數字的顏色也要不同。 showImg(https://segmentfault.com/img/bVbgD94?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 http...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
閱讀 1714·2021-11-22 15:33
閱讀 2085·2021-10-08 10:04
閱讀 3543·2021-08-27 13:12
閱讀 3419·2019-08-30 13:06
閱讀 1467·2019-08-29 16:43
閱讀 1392·2019-08-29 16:40
閱讀 786·2019-08-29 16:15
閱讀 2746·2019-08-29 14:13