【前端】纯CSS实现探照灯效果
生活随笔
收集整理的這篇文章主要介紹了
【前端】纯CSS实现探照灯效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果如下：
?
代碼實現：
以下代碼可以復制粘貼，在任何瀏覽器均可運行。
<!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>總結
以上是生活随笔為你收集整理的【前端】纯CSS实现探照灯效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 孤荷凌寒自学python第七十九天开始写
- 下一篇： 获取html元素的高,获取HTML元素的