1.说明:
1.1 推荐指数:★★★★
1.2 熟悉html的css3相关知识,展现python的强大和matplotlib高级作图法,熟悉相关编程知识和思维。
1.3 本解析通俗易懂,适合任何人士,代码本人亲测过,建议python3.8、微软vscode编辑器和谷歌浏览器使用。
1.4 有点长,适合收藏,慢慢玩。
![c40c54ee375aab3b50ff9bb401f1c69b.png](https://i-blog.csdnimg.cn/blog_migrate/92be8cbdcf7f8e04fb3e13793baefbb6.jpeg)
比较真实的音乐音效动画
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,bax.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 效果图:
![f876c76d4708f49b6a1e86295279f662.gif](https://i-blog.csdnimg.cn/blog_migrate/250eacc368296d858464198177c43e07.gif)
3 html的css3法:
3.1 效果图:
![26f66ed104c5532f566c31739d3013b0.gif](https://i-blog.csdnimg.cn/blog_migrate/89e23c02556f60c47b531429949a2f71.gif)
3.2 新建几个文件:如图
![bea41dcce66b78df96e4ff6941fec886.png](https://i-blog.csdnimg.cn/blog_migrate/0268e21a0971b3e05d555808488721e5.jpeg)
matplotlib法.py是上面的代码
3.3 css3法.html代码:
CSS3波浪音阶动画特效
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.自己整理一下,分享出来,一看就懂。