代码来自头条号"前端小智", 侵权删
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>波浪</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #000; position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .wave{ width: 100%; height: 100%; background-color: #4973ff; position: absolute; top: 0; left: 0; } span{ position: absolute; width: 325vh; height: 325vh; top: 0; left: 50%; transform: translate(-50%, -75%); background-color: #000; } span:nth-child(1){ animation: animate 5s linear infinite; border-radius: 45%; background-color: rgba(0, 0, 0, 1); } span:nth-child(2){ animation: animate 5s linear infinite; border-radius: 40%; background-color: rgba(0, 0, 0, .5); } span:nth-child(3){ animation: animate 5s linear infinite; border-radius: 42.5%; background-color: rgba(0, 0, 0, .5); } @keyframes animate { 0%{ transform: translate(-50%, -75%) rotate(0deg); } 100%{ transform: translate(-50%, -75%) rotate(360deg); } } .content{ color: #fff; font-size: 4em; position: relative; z-index: 1; } </style></head><body> <div class="wave"> <span></span> <span></span> <span></span> </div> <div class="content"> <h2>wave content</h2> </div></body></html>