江苏龙网

  1. 主页 > 生活百科 > >

使用CSS实现聚光灯效果

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>Document</title><style>body {background: #485460;}.text {font-size: 120px;position: relative;color: #84817a;}.text::after {content: attr(data-content);position: absolute;left: 0;top: 0;/* 设置背景渐变颜色 */background-image: linear-gradient(90deg, #ff5252, #ff793f, #33d9b2);/*背景裁切, 让它只有在文字区域才有背景 */-webkit-background-clip: text;background-clip: text;/* 取消掉文字的颜色 */color: transparent;/*x轴半径, y轴半径, at 圆心坐标让它只显示部分大小, 也就是聚光灯的所照的位置240正好是两个字的宽度*/clip-path: ellipse(240px 120px at 0% 50%);/*上面固定了显示区域, 现在就是让显示的区域左右移动即可*/animation: move 2s linear infinite alternate;}@keyframes move {to {/* 到终点 */clip-path: ellipse(240px 120px at 100% 50%);}}</style></head><body><div class="text" data-content="一个爬坑的Coder">一个爬坑的Coder</div></body></html>

【使用CSS实现聚光灯效果】


    推荐阅读


    上一篇：ChatGPT 的「神功」，是如何炼成的？

    下一篇：NodeJS堆溢出的原因，及解决办法。