标签：css3 浏览器 python 100% html matplotlib height Html background
感谢平台分享-http://bjbsair.com/2020-04-10/tech-info/53349.html
1.说明：
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.自己整理一下，分享出来，一看就懂。
标签：css3,浏览器,python,100%,html,matplotlib,height,Html,background 来源： https://blog.51cto.com/14744108/2486406
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。