CSS聚光燈文字(無圖片)

青眼魔術發表於2020-12-06

<template> <h1 data-spotlight="Welcome to my admin site!">Welcome to my admin site!</h1>
</template> <script> </script> <style> h1{ font-size: 70px; color: white; padding: 0; margin: 0; position: absolute; letter-spacing: -0.3rem; } h1::after { content: attr(data-spotlight); color: lightskyblue; position: absolute; top:0; left:0; clip-path: ellipse(100px 100px at 0% 50%); animation: spotlight 5s infinite; } @keyframes spotlight{ 0% { clip-path: ellipse(100px 100px at 0% 50%) } 50% { clip-path: ellipse(100px 100px at 100% 50%) } 100% { clip-path: ellipse(100px 100px at 0% 50%) } } </style>


 

相關文章