css让背景图片显示透明遮罩-凯发ag旗舰厅登录网址下载

*事先声明：本文章教程教学、文章封面来源自[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部分：