1.說明：
1.1 推薦指數：★★★★
1.2 熟悉html的css3相關知識，展現python的強大和matplotlib高級作圖法，熟悉相關編程知識和思維。
1.3 本解析通俗易懂，適合任何人士，代碼本人親測過，建議python3.8、微軟vscode編輯器和谷歌瀏覽器使用。
1.4 有點長，適合收藏，慢慢玩。
比較真實的音樂音效動畫
2 先說python的matplotlib法
2.1 代碼：
<code>#---導出模塊---
from mpl_toolkits.mplot3d import Axes3D
import matplotlib.pyplot as plt
import numpy as np
#---定義畫布大小、顏色、佈局---
#fig,ax=plt.subplots() #等同於下面，建議採用下面這種方式
fig = plt.figure(figsize=(22,14),facecolor='black',edgecolor='white')
ax=fig.add_subplot(111, projection='3d',facecolor='black')
#--定義3d座標軸的z和x，y---
z=[30]
x = np.arange(10)
#跳1萬次結束\t
for i in range(10000):\t
\ty = np.random.rand(10)
\tax.cla() #清楚之前的繪圖，顯示動態更新的效果
\t#color，可以選c,r,g,w,y,b
\tax.bar(x, y, zs=z, zdir='y', color='y', alpha=1)
\t#隱藏網格
\tax.grid(False)
\t#隱藏三維座標軸
\tax.axis('off')
\t#這個要放在上面2個隱藏的後面，否則沒效果
\tplt.pause(0.05)\t
#圖片展示
plt.show()/<code>
2.2 效果圖：
3 html的css3法：
3.1 效果圖：
3.2 新建幾個文件：如圖
matplotlib法.py是上面的代碼
3.3 css3法.html代碼：
<code>
<title>CSS3波浪音階動畫特效/<title>
<link>
\t
/<code>
3.4>
<code>const bars = document.querySelectorAll('.bar');
let intervalValue = 0;
const delay = time => new Promise(resolve => setTimeout(resolve, time));
[...bars].map((bar) => {
\tdelay(0).then(() => {
\t\tsetTimeout(() => {
\t\t\tbar.style.animation = 'sound 500ms linear infinite alternate'
\t\t}, intervalValue += 100)
\t})
})/<code>3.5 style.css代碼：
<code>*{margin:0;padding:0;list-style-type:none;}
.container {
height: 100vh;
/*背景顏色/從左到右漸變效果*/
background: linear-gradient(to right,blue,pink);
display: grid;
place-items: center;
}
.container .bars {
width: 300px;
height: 150px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.container .bars .bar {
height: 100%;
width: 9%;
}
/*瀏覽器兼容問題-谷歌瀏覽器*/
@-webkit-keyframes sound {
0% {
opacity: 0.35;
background: greenyellow;
height: 1px;
}
100% {
opacity: 1;
background:blueviolet;
height: 100%;
}
}/<code>3.6 備註：本機時谷歌瀏覽器操作效果，很多時候考慮不同瀏覽器，需要在css文件後面繼續添加適合其他瀏覽器，也就是在style.css代碼後面將下面的代碼複製進去即可。故意單獨拿出來，主要是考慮代碼的簡潔性和突出相關瀏覽器設置知識的重要性。
<code>/*其他瀏覽器兼容問題*/
/*瀏覽器兼容問題-歐朋瀏覽器*/
@-o-keyframes sound {
0% {
opacity: 0.35;
background: greenyellow;
height: 1px;
}
100% {
opacity: 1;
background:blueviolet;
height: 100%;
}
}
/*瀏覽器兼容問題-火狐瀏覽器*/
@-moz-keyframes sound {
0% {
opacity: 0.35;
background: greenyellow;
height: 1px;
}
100% {
opacity: 1;
background:blueviolet;
height: 100%;
}
}/<code>
4.講一個額外的小知識點：（小細節注意一下）
在導入文件的路徑時，html的：./xxx.xx和python的：./xxx.xx不同。
4.1 前者：html：./stytle.css指的是和html同一個文件夾即可。
4.2 後者：也是這個意思，但是在運行python的py文件時，需要注意，用微軟的vscode編輯器直接按run（綠色小三角形）可能報錯，在當前的目錄下或文件夾下，進入終端運行python的編輯器，然後python xxx.py不會報錯。
5.自己整理一下，分享出來，一看就懂。
分享到:
閱讀更多 易三一世 的文章
