前端 CSS 4 CSS 實現暖暖的小火堆

感謝 comehope 大佬的 [前端每日實戰]

github.io 瀏覽

* 

body 
.container 

而這裡我們將會改變這一狀態, 而且為了避免重複手動給星星固定位置及大小, 所以採用了 d3 庫來減少麻煩

使用 span 標籤 作為星星

因為星星要分時間閃爍所以隨機乙個--delay引數

// index.js

const columns = 15;
d3.select('.stars')
.style('--columns', columns)
.selectall('span')
.data(d3.range(columns * columns))
.enter()
.style('--delay', () => math.random() * 20);

.stars 

.stars span 

.stars span 

@keyframes spin 
5%,15% 
17.5% 
20%,
100% 
}

.fires 

@media screen and (min-width: 451px) 
}@media screen and (max-width: 450px) 
}

.fires 

@media screen and (min-width: 451px) 
.fires__flame:nth-of-type(1) 
.fires__flame:nth-of-type(2) 
.fires__flame:nth-of-type(3) 
.fires__flame:nth-of-type(4) 
}@media screen and (max-width: 450px) 
.fires__flame:nth-of-type(1) 
.fires__flame:nth-of-type(2) 
.fires__flame:nth-of-type(3) 
.fires__flame:nth-of-type(4) 
}.fires__flame 
.fires__flame:nth-of-type(2) 
.fires__flame:nth-of-type(3) 
.fires__flame:nth-of-type(4) 

@keyframes fire 

25% 
50% 
75% 
100% 
}

@media screen and (min-width: 451px) 

}@media screen and (max-width: 450px) 
}.fires__stick 
.fires__stick:last-of-type 

前端學習的小筆記 CSS

一 適配多解析度的css 通過判斷當前瀏覽器尺寸載入不同的css檔案 無限定條件的css載入檔案必須放在有限定條件的載入檔案前面，不然頁面載入會先載入限定條件的css檔案。判斷解析度的css檔案需要按width或者height從大到小依次往下排，頁面載入的時候會根據順序從下往上判斷，例如 選擇條件是...

前端css常用的選擇小匯

要使用css對html頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到css選擇器。選擇器就是選擇器用來指定樣式的作用範圍。類選擇器 類選擇器在css中比較常見，首先要在普通標籤中設定乙個類，類名不可為中文，然後在 style 標籤中新增該類名的樣式。類選擇器在選擇器前要加乙個點 例子 ...

前端css常用的選擇小匯

要使用css對html頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到css選擇器。選擇器就是選擇器用來指定樣式的作用範圍。類選擇器 類選擇器在css中比較常見，首先要在普通標籤中設定乙個類，類名不可為中文，然後在 style 標籤中新增該類名的樣式。類選擇器在選擇器前要加乙個點 例子 ...