欢迎关注我的公众号:前端侦探介绍一个比较常见的动画效果。在日常开发中,为了强调凸显某些文本或者元素,会加一些扫光动效,起到吸引眼球的效果,比如文本的或者是一个卡片容器,里面可能是图片或者文本或者任意元素除此之外,还有那种不规则的图片,比如奖品图案这些是如何实现的呢?一起看看吧一、CSS 扫光的原理CSS扫光动画的原理很简单,就是一个普通的、从左到右的、无限循环的位移动画位移动画可以选择transform或者改变background-position都行。至于扫光,我们只需要绘制一条斜向上45deg的线性渐变就可以了,示意如下用CSS实现就是background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);准备工作做好了,下面看 3 种不同场景的实现二、文本扫光首先来看文本扫光。由于扫光在文本内部,所以需要将这个渐变作为文本的颜色。文本渐变色,可以用backgrond-clip:text来实现,假设HTML是这样的前端侦探为了让效果看起来更加明显,我们用一个比较粗的字体h1{
font-size: 60px;
font-family: "RZGFDHDHJ";
font-weight: normal;
color:
...
继续阅读
(27)