先上图
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音乐律动效果</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.container .img {width: 200px;height: 200px;background: url("https://img2.baidu.com/it/u=3157916950,4052425366&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");background-size: cover;animation: rotate 10s linear infinite;position: relative;z-index: 0;}.container {margin: 5% auto;overflow: hidden;width: 200px;height: 200px;position: relative;border: 4px solid #ffffff;border-radius: 50%;box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);}.container ul {display: block;text-align: center;overflow: hidden;width: 200px;height: 100px;position: absolute;left: 0;bottom: -50px;z-index: 99;}.container ul li {display: inline-block;width: 10px;margin: 0 6px;height: 100%;background-color: #4B80EE;transform-origin: center center;animation: music 1.5s 0ms infinite ease-in-out;}@keyframes music {0% {transform: scaleY(1);}50% {transform: scaleY(0.2);}100% {transform: scaleY(1);}}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.container ul li:nth-child(2) {animation-delay: 0.1s;}.container ul li:nth-child(3) {animation-delay: 0.2s;}.container ul li:nth-child(4) {animation-delay: 0.3s;}.container ul li:nth-child(5) {animation-delay: 0.4s;}.container ul li:nth-child(6) {animation-delay: 0.5s;}.container ul li:nth-child(7) {animation-delay: 0.6s;}.container i {position: absolute;z-index: 9;display: block;width: 15px;height: 15px;border-radius: 50%;background: #000;left: 50%;top: 50%;transform: translate(-50%,-50%);border: 10px solid #ffffff;}</style>
</head>
<body>
<div class="container"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="img"></div><i></i>
</div>
</body>
</html>
