代码来自头条号'前端小智', 侵权删
<!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>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #1c1f2f; } .container{ position: relative; -webkit-box-reflect: below 1px linear-gradient(transparent, #0001); } .loader{ position: relative; width: 200px; height: 200px; border-radius: 50%; border: 20px solid transparent; border-bottom: 20px solid #06c8f0; border-right: 20px solid #06c8f0; transform: rotate(45deg); animation: boat 4s ease-in-out infinite; } @keyframes boat { 0%, 100%{ transform: rotate(0deg); } 50%{ transform: rotate(90deg); } } .ball{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; animation: ball 4s ease-in-out infinite; /* background-color: blue; */ } .ball::before{ content: ''; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; position: absolute; right: 15px; bottom: 50%; transform: translateY(-50%); } @keyframes ball { 0%{ transform: rotate(0deg) } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(0deg) } } </style></head><body> <div class="container"> <div class="loader"> <div class="ball"></div> </div> </div></body></html>