代码来自头条号"前端小智", 侵权删
<!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{ height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; } .container{ width: 100%; position: relative; display: flex; justify-content: center; align-items: center; -webkit-box-reflect: below 1px linear-gradient(#0001, #0004); } .loader{ width: 200px; height: 200px; background-color: #0d2323; border-radius: 50%; position: relative; animation: animate 2s linear infinite; } @keyframes animate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg) } } .loader::before{ content: ""; width: 50%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to top, transparent, rgba(0, 255, 249, .4)); background-size: 100px 180px ; background-repeat: no-repeat; border-top-left-radius: 100px; border-bottom-left-radius: 100px; } .loader::after{ content: ""; width: 20px; height: 20px; border-radius: 50%; position:absolute; top: 0; left: 50%; transform: translateX(-50%); background: #00fff9; box-shadow: 0px 0px 10px #00fff9, 0px 0px 20px #00fff9, 0px 0px 30px #00fff9, 0px 0px 40px #00fff9, 0px 0px 50px #00fff9, 0px 0px 60px #00fff9, 0px 0px 70px #00fff9, 0px 0px 80px #00fff9, 0px 0px 90px #00fff9, 0px 0px 100px #00fff9; } span{ position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; border-radius: 50%; background: #000; } </style></head><body> <div class="container"> <div class="loader"><span></span></div> </div></body></html>