本篇文章帶給大家的內容是關於如何使用CSS和D3和GSAP實現橫條loader （附源碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
https://github.com/comehope/front-end-daily -challenges
定義dom，容器包含1 個span 元素：
<div> <span></span> </div>
置中顯示：
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：
<script></script>
刪除掉dom 中的span 元素，改用d3 創建，其中常數COUNT 是細長條的數量，因為d3.range() 產生的數據是從0 開始的數列，所以把資料修正為以日常習慣的從1 開始的數列：
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%)`)把細長條的數量改為2 個，顏色改為動態產生：
const HUE_DEG = 12;
const COUNT = 2;
d3.select('.loader')
/* ...略 */
.style('background-color', (d) => `hsl(${d * HUE_DEG}, 100%, 65%)`)再進一步，把顏色改為彩色條和黑色條間隔出現，請注意雖然在表達式中hue 的值是按12 遞增，但實際看到的的效果是彩色長條間的hue 相差24，因為其中夾雜著黑色長條：
d3.select('.loader')
/* ...略 */
.style('background-color', (d) => d % 2 !== 0
? `hsl(${d * HUE_DEG}, 100%, 65%)`
: 'black');此時，動態產生的dom 結構為：
<p> <span></span> <span> </span></p>
引入gsap 庫：
<script></script>
增加長條由中心向兩側伸展的動畫效果：
let animation = new TimelineMax({repeat: -1});
animation.staggerFrom('.loader span', 0.5, {scaleX: 0}, 0.4)最後，把長條的數量改為30 個，它是用整圈色相環的360 度除以hue 間隔得到的：
const COUNT = 360 / HUE_DEG;
大功告成！
相關推薦：
如何使用CSS和GSAP實現有多個關鍵影格的連續動畫（附源碼）#以上是如何使用CSS和D3和GSAP實作橫條 loader （附源碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
