Html的css3法和python的matplotlib法實現波浪音節動畫特效解析

.說明：

1.1 推薦指數：★★★★

1.2 熟悉html的css3相關知識，展現python的強大和matplotlib高級作圖法，熟悉相關編程知識和思維。

1.3 本解析通俗易懂，適合任何人士，代碼本人親測過，建議python3.8、微軟vscode編輯器和谷歌瀏覽器使用。

1.4 有點長，適合收藏，慢慢玩。

比較真實的音樂音效動畫

2 先說python的matplotlib法

2.1 代碼：

#---導出模塊---
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萬次結束	
for i in range(10000):	
	y = np.random.rand(10)
	ax.cla()  #清楚之前的繪圖，顯示動態更新的效果
	#color，可以選c,r,g,w,y,b
	ax.bar(x, y, zs=z, zdir='y', color='y', alpha=1)
	#隱藏網格
	ax.grid(False)
	#隱藏三維坐標軸
	ax.axis('off')
	#這個要放在上面2個隱藏的后面，否則沒效果
	plt.pause(0.05)	

#圖片展示
plt.show()

2.2 效果圖：

3 html的css3法：

3.1 效果圖：

3.2 新建幾個文件：如圖

matplotlib法.py是上面的代碼

3.3 css3法.html代碼：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3波浪音階動畫特效</title>

<link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
	<div class="bars bars--paused">
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
	</div>
</div>

<script src="./script.js"></script>
</body>
</html>

3.4 script.js代碼：

const bars = document.querySelectorAll('.bar');
let intervalValue = 0;

const delay = time => new Promise(resolve => setTimeout(resolve, time));

[...bars].map((bar) => {
	delay(0).then(() => {
		setTimeout(() => {
			bar.style.animation = 'sound 500ms linear infinite alternate'
		}, intervalValue += 100)
	})
})

3.5 style.css代碼：

*{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%;
  }
}

3.6 備注：本機時谷歌瀏覽器操作效果，很多時候考慮不同瀏覽器，需要在css文件后面繼續添加適合其他瀏覽器，也就是在style.css代碼后面將下面的代碼復制進去即可。故意單獨拿出來，主要是考慮代碼的簡潔性和突出相關瀏覽器設置知識的重要性。

/*其他瀏覽器兼容問題*/
/*瀏覽器兼容問題-歐朋瀏覽器*/
@-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%;
  }
}

4.講一個額外的小知識點：（小細節注意一下）

在導入文件的路徑時，html的：./xxx.xx和python的：./xxx.xx不同。

4.1 前者：html：./stytle.css指的是和html同一個文件夾即可。

4.2 后者：也是這個意思，但是在運行python的py文件時，需要注意，用微軟的vscode編輯器直接按run（綠色小三角形）可能報錯，在當前的目錄下或文件夾下，進入終端運行python的編輯器，然后python xxx.py不會報錯。

5.自己整理一下，分享出來，一看就懂。

ss3給我們前端開發帶來了很便利, 我們可以使用css3

家好，今天給大家介紹一款，波浪翻轉loading文字動畫特效html頁面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

帶波浪效果和翻轉特效,看起來非常炫（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：10179，需要的朋友，點擊下面的鏈接后，搜索10179，即可獲取。

就愛UI - 分享UI設計的點點滴滴

在線咨詢

上一篇：HTML5 的調用攝像頭拍照和獲取視頻流的方法
下一篇：10個前端開發必備的VS Code擴展（上）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。