代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: thistle;color: #fff;}.dajianshi {margin: 100px auto 0;width: 200px;height: 120px;display: flex;}.dajianshi span {width: 10px;border-radius: 18px;margin-right: 20px;}.dajianshi span:nth-child(1) {animation: bar1 2s 0.2s infinite linear;}.dajianshi span:nth-child(2) {animation: bar2 2s 0.4s infinite linear;}.dajianshi span:nth-child(3) {animation: bar3 2s 0.6s infinite linear;}.dajianshi span:nth-child(4) {animation: bar4 2s 0.8s infinite linear;}.dajianshi span:nth-child(5) {animation: bar5 2s 1.0s infinite linear;}.dajianshi span:nth-child(6) {animation: bar6 2s 1.2s infinite linear;}.dajianshi span:nth-child(7) {animation: bar7 2s 1.4s infinite linear;}.dajianshi span:nth-child(8) {animation: bar8 2s 1.6s infinite linear;}.dajianshi span:nth-child(9) {animation: bar9 2s 1.8s infinite linear;}@keyframes bar1 {0% {background: #f677b0;margin-top: 25%;height: 10%;}50% {background: #f677b0;height: 100%;margin-top: 0%;}100% {background: #f677b0;height: 10%;margin-top: 25%;}}@keyframes bar2 {0% {background: #df7ff2;margin-top: 25%;height: 10%;}50% {background: #df7ff2;height: 100%;margin-top: 0%;}100% {background: #df7ff2;height: 10%;margin-top: 25%;}}@keyframes bar3 {0% {background: #8c7ff2;margin-top: 25%;height: 10%;}50% {background: #8c7ff2;height: 100%;margin-top: 0%;}100% {background: #8c7ff2;height: 10%;margin-top: 25%;}}@keyframes bar4 {0% {background: #7fd0f2;margin-top: 25%;height: 10%;}50% {background: #7fd0f2;height: 100%;margin-top: 0%;}100% {background: #7fd0f2;height: 10%;margin-top: 25%;}}@keyframes bar5 {0% {background: #7ff2d3;margin-top: 25%;height: 10%;}50% {background: #7ff2d3;height: 100%;margin-top: 0%;}100% {background: #7ff2d3;height: 10%;margin-top: 25%;}}</style>
</head><body><div class="container"><div class="top"><h3>音频波纹加载效果</h3></div><div class="dajianshi "><span></span><span></span><span></span><span></span><span></span></div></div>
</body></html>