实现模仿 网易播放器播放页 的高斯模糊遮罩及专辑封面的转动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div { width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; z-index: -2; background: url("data:image/jpeg;base64,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") no-repeat; background-size: cover; filter: blur(100px); text-align: center; } .mask { text-align: center; position: absolute; left: 0; top: 0; z-index: -1; width: 100vw; height: 100vh; background: rgba(0,0,0,.1); } .img-contain { border-radius: 9999999px; width: 60vw; height: 60vw; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); border: 20px solid rgba(0,0,0,.2); overflow: hidden; } .img { animation: zhuan linear 15s infinite; transform-origin: center; width: 100%; height: 100%; } @keyframes zhuan { from { transform: rotate(0deg) translate(0, 0); } to { transform: rotate(360deg) translate(0, 0); } } </style> </head> <body> <div class="div"></div> <div class="mask"></div> <div class="img-contain"> <img class="img" src="https://www.wuyabala.com/static/img/logo.jpg" alt=""> </div> </body> </html>