*事先声明：本文章教程教学、文章封面来源自[CSS]聚光灯项目 by CodingStartup起码课，且已经CodingStartup起码课授权允许转载！
为了保持原有风格，本文始终保持与@CodingStartup起码课的视频风格一致
*在出现同样的代码块时，灰色为原有代码，彩色为新增/修改代码
Hello，Everybody
今天我们不讲别的，就来讲讲利用CSS做一个聚光灯。
先给大家放个例子：https://itmanchina.github.io/css-test(复制到浏览器打开)
到这里，有的小伙伴会问啦，这是怎么做到的？好神奇！
其实很简单，一层灰色的底层文字；顶层文字为彩色，套用css的圆形遮罩(Mask)，再加上css animation(移动效果)就可以了。
OK，回归正题：
项目总共分成两个部分
1.html
2.css*
因为html只占少量内容，我们重点把放在css上
(以下内容推荐到codepen.io或者其它代码实时预览网站测试！)
html部分：
<h1>TestTexth1>css部分：
html { font-size: 15px; }/*这里把文字【TestText】的大小设定为15px(不懂px的小伙伴请百度Picture Element 【Pixel】) */body{ background-color: #222; /*背景颜色设为灰色*/ display: flex; justify-content: center; align-items: center; min-height: 100vh; } /*这一段css把文字【TestText】固定在html最中间的位置*/h1{ color: #333; /*这里设定字体的颜色为灰黑色*/ font-family: Helvetica; /*这里设置字体为Helvetica(常用于西方语言字母)*/ margin: 0; padding: 0; font-size: 8rem; /*文字大小设定*/ letter-spacing: -0.2rem; /*文字间距设定*/}/*知识点1：rem 它是CSS3中新增加的一个尺寸(度量)单位，根节点(html)的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。*//*知识点2：margin 这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度；块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。(允许存在负值)*//*知识点3：padding 简写属性在一个声明中设置所有内边距属性；这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。*/↓写到这里，你的成果应该是这样的哦
(底部文字示例)
到这里，第一步算是完成了(长叹一口气)
(接着还是CSS的内容)
css部分(敲重点)：
h1::after{ content: 'TestText'; /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/ color: yellow; /*顶端文字颜色设为“黄色”*/ position: absolute; /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/ top: 0; /*顶端文字顶部距离*/ left: 0; /*顶端文字左端距离*/}/*这时候，底部文字居中，顶部文字被固定在左上角*/要将它(被设黄色的底部文字)与底部文字重叠起来，将h1字段(新增)position设定为relative就可以达到(顶部文字和底部文字)重叠的效果了
@CodingStartup起码课
也就是将上面的h1字段变成：
h1{ /*color: #333;*/ /*font-family: Helvetica;*/ /*margin: 0；*/ /*padding: 0;*/ /*font-size: 8rem;*/ /*letter-spacing: -0.2rem;*/ position: relative; }文字重叠完成！
效果图↓
(顶部文字与底部文字结合后示例)
紧接着，继续修改h1::after部分(套用圆形mask【遮罩】)【也是重点！！！】
h1::after{ /*content: 'TestText';*/ /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/ /*color: yellow;*/ /*顶端文字颜色设为“黄色”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ -webkit-clip-path: ellipse(100px 100px at 0% 50%); /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/ clip-path: ellipse(100px 100px at 0% 50%); }/*由于浏览器的支援性问题，Safari、Chrome等浏览器需要一段前缀【-webkit-】才能支持clip-path的属性*//*使用前缀时一定要保留原来的属性*//*为了防止已经支持clip-path属性的浏览器(FireFox等)出错，保留原来的clip-path属性*/到了这一步，黄色的小聚光灯应该会出现在最左边的【Te】处
这时候，尝试把clip-path的0%修改为50%(-webkit-和原来的都修改一下)看看聚光灯是不是被移动到了文字的中间。如果是的话，证明代码有效。如果不变的话，请检查代码是否有误！
【记得修改成功后重新把左边的50%改回0%哦！！！】
【右边的50%是定值，不要动！！！】
↓(效果图)↓
(聚光灯居中示例)
好的，接下来继续创建新的区块：
@keyframes spotlight { 0% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); /*这里直接套用完整的clip-path区块，下面的100%与0%用同样的数据*/ } 50% { -webkit-clip-path: ellipse(100px 100px at 100% 50%); clip-path: ellipse(100px 100px at 100% 50%); /*50%的clip-path要把原本的0%改为100%，让mask(遮罩)到达文字的最右端*/ } 100% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); }}/*keyframes的animation(动画)部分完成*/动画部分完成得差不多啦，但还差一个重要的步骤！现在让我们继续将animation写入到h1::after中
h1::after{ /*content: 'TestText';*/ /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/ /*color: yellow;*/ /*顶端文字颜色设为“黄色”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/ /*clip-path: ellipse(100px 100px at 0% 50%);*/ animation: spotlight 5s infinite; /*让@keyframes里的动画5秒循环一次，动画永久循环*/ }接下来有两个地方想修饰一下，第一，黄色的(顶端)文字是直接写在了h1::after里的content内，想把值设定在HTML里面
@CodingStartup起码课
①(终于)要对html部分动手了
<h1 data-spotlight="TestText">TestTexth1>②继续改h1::after的内容
h1::after{ content: attr(data-spotlight); /*这部分直接从h1中读取顶部文字的值而不用在这里设定一个值了*/ /*color: "yellow";*/ /*顶端文字颜色设为“黄色”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/ /*clip-path: ellipse(100px 100px at 0% 50%);*/ /*animation: spotlight 5s infinite;*/ /*让@keyframes里的动画5秒循环一次，动画永久循环*/ }第二，大家会发制作成品的文字(TestText)是彩色的而不是黄色(纯色)的
@CodingStartup起码课
方法是用上背景图片，把文字当做一个mask(遮罩)【彩色图片地址：https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg】
继续对h1::after动手
h1::after{ /*content: attr(data-spotlight);*/ /*这部分直接从h1中读取顶部文字的值而不用在这里设定一个值了*/ color: transparent; /*重中之重：顶端文字颜色设为“透明”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/ /*clip-path: ellipse(100px 100px at 0% 50%);*/ /*animation: spotlight 5s infinite;*/ /*让@keyframes里的动画5秒循环一次，动画永久循环*/ background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg); /*这里把背景设置为url内图片的链接*/ background-size: 150%; /*经背景放大为原来的1.5倍*/ background-position: center center; /*将背景图置中*/ -webkit-background-clip: text; /*详细介绍查看上文有关【-webkit-】的介绍*/ background-clip: text; /*将背景的绘图区域设定在文字中*/ }
到了这里，总算是搞定聚光灯效果的构建了
但是！因为这只是预览阶段的内容，所以暂时还不能直接发布到网络上！
Q：怎么办？
A：在html加入css的位置就可以了。
html部分(记得把这些代码保存到.html文件内)：
<html><head><title>CSS 测试title> <link href="1.css" rel="stylesheet" type="text/css" media="all" /> head><body><h1 data-spotlight="TestText">TestTexth1>body>html>来一遍没有注释的完整的css：
html{ font-size：15px;}body{ background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh;}h1{ color: #333; font-family: Helvetica; margin: 0; padding: 0; font-size: 8rem; letter-spacing: -0.2rem; position: relative;}h1::after{ content: attr(data-spotlight); color: transparent; position: absolute; left: 0; top: 0; -webkit-clip-path: ellipse(100px 100px at 0% 50%); clip-path: ellipse(100px 100px at 0% 50%); animation: spotlight 6s infinite; background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg); background-size: 150%; background-position: center center; -webkit-background-clip: text; background-clip: text;}@keyframes spotlight { 0% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); } 50% { -webkit-clip-path: ellipse(100px 100px at 100% 50%); clip-path: ellipse(100px 100px at 100% 50%); } 100% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); }}最后，将这两个文件放置在服务器(或者Github Pages)的同一个目录下即可发布到网络上啦
~\(≧▽≦)/~
OK，以上就是关于CSS聚光灯项目的全部内容，觉得不错的话点个“在看吧”！
(也要记得关注CodingStartup起码课哦)
↓打赏一下
关注CodingStartup起码课↓
点个“在看”就是对我们最大的支持！?
