資訊專欄INFORMATION COLUMN
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/pOZKWJ
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cVB48Ur
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含 1 個 span 元素：
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定義容器尺寸：
.loader {
width: 40em;
height: 1em;
font-size: 10px;
}
設置容器中 span 的樣式，是一個彩色細長條：
.loader {
position: relative;
}
.loader span {
position: absolute;
width: inherit;
height: inherit;
background-color: hsl(24, 100%, 65%);
}
引入 d3.js：
刪除掉 dom 中的 span 元素，改用 d3 創(chuàng)建，其中常量 COUNT 是細長條的數(shù)量，因為 d3.range() 生成的數(shù)據(jù)是從 0 開始的數(shù)列，所以把數(shù)據(jù)修正為以日常習慣的從 1 開始的數(shù)列：
const COUNT = 1;
d3.select(".loader")
.selectAll("span")
.data(d3.range(COUNT).map(d => d + 1))
.enter()
.append("span")
刪除掉 css 中設置 span 元素 background-color 屬性的代碼，改用 d3 設置：
d3.select(".loader")
.selectAll("span")
.data(d3.range(COUNT).map(d => d + 1))
.enter()
.append("span")
.style("background-color", `hsl(24, 100%, 65%)`)
把細長條的數(shù)量改為 2 個，顏色改為動態(tài)生成：
const HUE_DEG = 12;
const COUNT = 2;
d3.select(".loader")
/* ...略 */
.style("background-color", (d) => `hsl(${d * HUE_DEG}, 100%, 65%)`)
再進一步，把顏色改為彩色條和黑色條間隔出現(xiàn)，請注意雖然在表達式中 hue 的值是按 12 遞增，但實際看到的的效果是彩色長條間的 hue 相差 24，因為其中夾雜著黑色長條：
d3.select(".loader")
/* ...略 */
.style("background-color", (d) => d % 2 !== 0
? `hsl(${d * HUE_DEG}, 100%, 65%)`
: "black");
此時，動態(tài)生成的 dom 結構為：
引入 gsap 庫：
增加長條由中心向兩側伸展的動畫效果：
let animation = new TimelineMax({repeat: -1});
animation.staggerFrom(".loader span", 0.5, {scaleX: 0}, 0.4)
最后，把長條的數(shù)量改為 30 個，它是用整圈色相環(huán)的 360 度除以 hue 間隔得到的：
const COUNT = 360 / HUE_DEG;
大功告成！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/97782.html
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbg0gq?w=400&h=305); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbg0gq?w=400&h=305); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書 過往項目 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（共 29 個項目） 2018 年 6 月份項目匯總（...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書 過往項目 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（共 29 個項目） 2018 年 6 月份項目匯總（...
閱讀 3751·2021-11-24 09:39
閱讀 3499·2019-08-30 15:56
閱讀 1384·2019-08-30 15:55
閱讀 1048·2019-08-30 15:53
閱讀 1937·2019-08-29 18:37
閱讀 3618·2019-08-29 18:32
閱讀 3148·2019-08-29 16:30
閱讀 2958·2019-08-29 15:14
