纯 CSS 实现 3 种酷炫扫光特效！

文章预览

在日常开发中，为了强调凸显某些文本或者元素，会加一些扫光动效，起到吸引眼球的效果，比如文本的 或者是一个卡片容器，里面可能是图片或者文本或者任意元素 除此之外，还有那种不规则的图片，比如奖品图案 这些是如何实现的呢？一起看看吧 一、CSS 扫光的原理 CSS 扫光动画的原理很简单，就是一个普通的、从左到右的、无限循环的位移动画 位移动画可以选择 transform 或者改变 background-position 都行。 至于扫光，我们只需要绘制一条斜向上 45deg 的线性渐变就可以了，示意如下 用 CSS 实现就是 background : linear-gradient ( 45 deg, rgba ( 255 , 255 , 255 , 0 ) 40 %, rgba ( 255 , 255 , 255 , 0.7 ), rgba ( 255 , 255 , 255 , 0 ) 60 %); 准备工作做好了，下面看 3 种不同场景的实现 二、文本扫光 首先来看文本扫光。 由于扫光在文本内部，所以需要将这个渐变作为文本的 ………………………………