音波效果（纯CSS实现）

本文主要是介绍音波效果（纯CSS实现），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!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>

这篇关于音波效果（纯CSS实现）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！