Html的css3法和python3 的matplotlib法实现波浪音节动画特效解析

感谢平台分享-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 有点长，适合收藏，慢慢玩。

Html的css3法和python的matplotlib法实现波浪音节动画特效解析

比较真实的音乐音效动画

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 效果图：

Html的css3法和python的matplotlib法实现波浪音节动画特效解析

3 html的css3法：

3.1 效果图：

Html的css3法和python的matplotlib法实现波浪音节动画特效解析

3.2 新建几个文件：如图

Html的css3法和python的matplotlib法实现波浪音节动画特效解析

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.自己整理一下，分享出来，一看就懂。

来源：oschina

链接：https://my.oschina.net/u/4274413/blog/3228883

标签

Chrome