CSS实现文字聚光灯效果
墨初 Web前端 711阅读
使用CSS样式可以对文字实现一个聚光灯来回照射的效果,其原理也很简单,下面是参考示例。
CSS聚光灯效果原理:
1、将两个文字重叠,内层是灰色,外层为渐变色
2、在外层文字加上圆形的遮罩层
3、对外层的文字加上动画效果
CSS聚光灯效果示例
1、先上示例图片
2、示例代码
<style> html,body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; } span{ font-size: 4rem; color: #333; width: 37.5rem; position: relative; font-weight: bold; } /* 使用伪元素加个遮罩层 */ span::after{ content:attr(data-text); /*读取元素的 data-text 属性值*/ position: absolute; top: 0; left: 0; color: transparent; background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d); background-clip: text; -webkit-background-clip: text; clip-path: ellipse(6.25rem 6.25rem at 0% 50%); animation: move 5s infinite; } @keyframes move{ 0%, 100%{ clip-path: ellipse(6.25rem 6.25rem at 0% 50%); } 50%{ clip-path: ellipse(6.25rem 6.25rem at 100% 50%); } } </style> <span data-text="73so.com">73so.com</span>