效果如下：
代码实现：
以下代码可以复制粘贴，在任何浏览器均可运行。
<!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>CSS实现探照灯效果</title> </head> <style> body, html { background-color: #3c3c3c; text-align: center; } .spotlight { position: relative; display: inline-block; font-size: 48px; } .spotlight::after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: attr(title); color: #fff; animation: spotlight 3s ease-in-out infinite alternate; } @keyframes spotlight { 0% { clip-path: ellipse(32px 32px at 0% 50%); } 100% { clip-path: ellipse(32px 32px at 100% 50%); } } </style> <body> <h1 title="hello world" class="spotlight">hello world</h1> </body> </html>
