音波效果(纯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>
相关推荐
恋猫de小郭5 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆9 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼19 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子20 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆21 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了22 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆27 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆27 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆28 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆29 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js