实现“咔咔云建站”的鼠标悬停图片半透明渐变遮罩动画

发布时间：2020-01-03责任编辑：满帅浏览：1082

当鼠标滑过图片时，图片上方会覆盖一层渐变颜色的蒙版，移开图片蒙版又会以渐变的方式消失，视觉效果相当好看。

1. 首先从左上角到右下角线性渐变

background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);

2. 给背景大小background-size: 400% 400%;

3. 使用过渡属性，使扫光平滑transition: .5s all;

4. 鼠标滑过图片给背景定位 background-position: 100% 100%;

效果如图

咔咔组供稿