如何用 CSS 和 D3 創作火焰動畫

2022-07-04 10:30:13 字數 1761 閱讀 8967

按下右側的「點選預覽」按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。

請用 chrome, safari, edge 開啟**。

定義 dom，容器中包含 3 個元素，每個元素代表組成火焰的 1 個火苗：
居中顯示：

body
定義容器尺寸：

.flame
畫出火苗：

.flame 


.flame span
用變數畫出多個火苗，其中 --particles 是火苗的數量：

.flame 


.flame span 


.flame span:nth-child(1) 


.flame span:nth-child(2) 


.flame span:nth-child(3)
修改混合模式，使火苗重疊的部分變亮：

.flame span
增加火焰公升騰的動畫效果：

.flame span 


@keyframes rise 


25% 


to }
用變數設定火苗公升起的延時時間，使火苗陸續公升起：

.flame span 


.flame span:nth-child(1) 


.flame span:nth-child(2) 


.flame span:nth-child(3)
接下來用 d3 來批量處理 dom。

引用 d3 庫：

用 d3 為 css 中的 --particles 變數賦值：

const count_of_particles = 3;


d3.select('.flame')


.style('--particles', count_of_particles);
用 d3 建立 dom 中的火苗元素：

d3.select('.flame')


.style('--particles', count_of_particles)


.selectall('span')


.data(d3.range(count_of_particles))


.enter()
用 d3 為火苗元素的 css 中的 --n 和 --rnd 變數賦值：

d3.select('.flame')


.style('--particles', count_of_particles)


.selectall('span')


.data(d3.range(count_of_particles))


.enter()


.style('--n', (d) => d + 1)


.style('--rnd', () => math.random());
刪除掉 dom 中的火苗元素，刪除掉 css 中的變數宣告。

最後，把火苗元素設定為 100 個，形成火焰效果：

const count_of_particles = 100;
大功告成！

如何用純 CSS 創作乙個方塊旋轉動畫

按下右側的 點選預覽 按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，容器中包含 4 個元素 居中顯示 body畫出容器中心的方塊 loader畫出容器四周的方塊 loader,loader span loader span nth ch...

如何用純 CSS 創作乙個小球反彈的動畫

按下右側的 點選預覽 按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，只有 1 個元素 居中顯示 body定義容器尺寸 box用偽元素畫出小球 box box before 定義沿 x 軸即橫向移動的動畫效果 keyframes move...

css3 3d轉換和3D動畫

rotatex 沿x軸翻轉 rotatey 沿y軸翻轉 rotatez 沿z軸翻轉 類似於rotate 在水平旋轉 transform translate3d 30px,30px,800px transform translatez 800px translatex 30px translatey ...