音波效果(纯CSS实现)

html 复制代码
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<!-- 移动端适配 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入VUE CDN -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<!-- 引入el样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入el组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<title>音波效果</title>
</head>
<style>

/*实现原理就是通过动画控制高度,距离顶部高度,背景色变换*/

	@keyframes soundWave {
  0%, 100% {
    height: 10%;
    margin-top: 25%;
    background: #f677b0;
  }
  50% {
    height: 100%;
    margin-top: 0%;
    background: #df7ff2;
  }
}

.music {
  width: 175px;
  height: 100px;
  display: flex;
  align-items: flex-end;
}

.music span {
  width: 6px;
  border-radius: 18px;
  margin-right: 6px;
  background: #f677b0;
  animation: soundWave 2s infinite linear;
}

.music span:nth-child(2) {
  animation-delay: 0.2s;
  background: #df7ff2;
}

.music span:nth-child(3) {
  animation-delay: 0.4s;
  background: #8c7ff2;
}

.music span:nth-child(4) {
  animation-delay: 0.6s;
  background: #7fd0f2;
}

.music span:nth-child(5) {
  animation-delay: 0.8s;
  background: #7ff2d3;
}

.music span:nth-child(6) {
  animation-delay: 1.0s;
  background: #7ff2a0;
}

.music span:nth-child(7) {
  animation-delay: 1.2s;
  background: #adf27f;
}

.music span:nth-child(8) {
  animation-delay: 1.4s;
  background: #e7f27f;
}

.music span:nth-child(9) {
  animation-delay: 1.6s;
  background: #ecaa64;
}
</style>

<body>
	<div id="app">

		<div class="music">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		  </div>


	</div>
	<script>
		/* 实例化vue */
		var app = new Vue({
			el: '#app',
			data: {

			},
			mounted() {

			},
			methods: {



			}
		})
	</script>
</body>

</html>
相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript