html5声波效果动画,CSS3 声波发射动画
时间: 2023-09-04 11:15:36 浏览: 39
HTML5声波效果动画可以通过Canvas和Web Audio API实现。下面是一个简单的示例代码:
HTML部分:
```
<canvas id="canvas"></canvas>
```
JavaScript部分:
```
// 获取Canvas元素
var canvas = document.getElementById('canvas');
// 获取Canvas上下文
var ctx = canvas.getContext('2d');
// 定义声波参数
var speed = 0.02; // 速度
var frequency = 2; // 频率
var amplitude = 50; // 振幅
var phase = 0; // 相位
// 定义声波发射动画
function draw() {
// 清空Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制声波
ctx.beginPath();
for (var x = 0; x < canvas.width; x++) {
var y = amplitude * Math.sin(frequency * x + phase);
ctx.lineTo(x, canvas.height/2 + y);
}
ctx.strokeStyle = '#ffffff';
ctx.stroke();
// 更新相位
phase += speed;
// 重复绘制
requestAnimationFrame(draw);
}
// 开始动画
draw();
```
CSS3声波发射动画可以通过伪元素和动画实现。下面是一个简单的示例代码:
HTML部分:
```
<div class="wave"></div>
```
CSS部分:
```
.wave {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ffffff;
overflow: hidden;
}
.wave::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transform: scale(0);
animation: wave 2s infinite linear;
}
@keyframes wave {
from {
transform: scale(0);
}
to {
transform: scale(1);
opacity: 0;
}
}
```
通过伪元素的动画效果,实现了CSS3声波发射动画。