fans_x的博客

话不多说，咱们先来看看本篇文章中我们实现的效果。是不是发现这个效果非常的熟悉？没错，这经常能够在一些电商网站可以看到，那这究竟是怎么实现的呢？接下来由我来带领大家尝试做一个类似这样的效果出来。扫光样式可以通过线性渐变来创建，这种方法简单且效果良好。扫光动画的实现通常需要改变元素的位置或背景位置，这可以通过 CSS 的transform或属性来实现。对于文本元素，可以通过改变来实现扫光动画。但是，需要注意的是，如果背景尺寸等于容器尺寸，那么设置的百分比将无效。

打开控制台其实我们可以看到这里是在img这里主要使用了mask这个属性：在我们去掉这个mask属性以后，会发现轮播图会有一个白色的背景，这更加让我确定了这个mask属性就是实现这个样式的关键点。所以，接下来让我们来探究一下这个mask到底是何方神圣，居然能完成这样的样式。我们先来看看MDN对maskmask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个解释肯定让小伙伴们糊里糊涂的，简单来说就是遮罩图片中不透明的部分会和原图片合在一起。拿上面天谕群星计划。

在开始正文之前我们先看看炉石传说的一个页面中的两个地方：加载更多按钮和tab切换。打开控制台，我们可以发现这两个地方都有一个相同的地方：都使用了这个属性。那这个属性有什么用那，接下来由我来向大伙详细介绍一下这个属性。看完前言的小伙伴是不想着这两个例子我使用backgrond就可以解决了，为啥还要这个属性？我刚开始接触的时候也是这样想的，但我在对一个项目进行换肤的时候就出现了一个问题：很多地方都是文字不用修改，但是边框要进行修改，导致我每个地方都需要重新进行切图，换皮😅😅😅另外，我们在使用的同时还可以使用。

在这个夜黑风高的夜晚，你的眼睛已经开始有些疲惫。你的手指在键盘上轻轻地敲击着，仿佛在弹奏一首无声的夜曲。你的思绪在代码的海洋中飘荡，寻找着最后一行需要完成的代码。就在这时，你的老板走了过来，他的脸上带着一丝期待也带着一丝压榨廉价劳动力的理所当然。他说：“我需要你给我们产品首页的标题做一个动画。但是，我希望这个动画能够突出标题的内容，而不是动画本身。我不希望动画太过炫酷，以免分散用户的注意力。”你虽然心生不满，但又不得不做，毕竟老板最近行情不好。既来之，则安之，心想着等行情好了，马上就跑。

这段时间对逆水寒很是着迷，这不我又打开了它的官网，不得不说网易前端官网做的是真炫酷！！！同样是前端的开发者(自己还是小菜鸡罢了)，就不得不想扣扣官方的细节了，拿出我们老生常谈的问题—适配，官方做的很漂亮，窗口缩小不会影响页面内容位置的偏移，当我将窗口缩小的时候还会出现滚动条让我可以滚动滚动条来看到完整的页面内容。有兴趣的同学可以去打开官网尝试一下。这种页面其实在很多地方都可以看到，如：产品官网，可视化大屏看板等等。所以这个怎么实现呢？接下来让我们来尝试复现一下。

时的颜色，后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的。偏移处用户视图区域(偏移值可以更改)，然后让新的图片偏移到原。来换色，而在日常开发过程中通常会遇到设计那边要求图片在。时换色，那么怎么利用 CSS 来完成这个效果呢。这样的图片却不可以通过。

实现原理也比较简单，就是只展示右上角的正方形的四分之一，然后将文字进行相对定位到其中即可。