基于CSS mask-image 实现炫酷图片过渡效果之星球大战

最新推荐文章于 2024-09-10 22:50:51 发布

m0_73749017

最新推荐文章于 2024-09-10 22:50:51 发布

阅读量485

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/m0_73749017/article/details/127482855

版权

本文介绍了如何使用CSS `mask-image`属性创建四种独特的图片过渡效果，包括渐变切换、锥形渐变过渡、径向渐变过渡以及线性渐变的动态展示。通过实例代码和动画效果展示，帮助开发者实现令人眼前一亮的图片交互体验。

摘要由CSDN通过智能技术生成

一些图片的鼠标悬停效果，鼠标悬停后会改变原图，单纯的渐隐渐现，放大缩小，左右平移已经满足不了产品经理期望了，总觉得不够惊艳，创意不够。其实作为一个开发者，也不会满足这普通日常的动画交互效果，在寻找新的 idea 时发现基于 CSS mask-image 可以实现很多不错的效果，本文将基于此属性实现四种图片过渡动画效果。

前置知识点

mask-image CSS 属性用于设置元素上遮罩层的图像。默认值是 none，也就是无遮罩图片。因此，和 border 属性中的 border-style 属性类似，是一个想要有效果就必须设定的属性值。注意由于此属性目前还不是完全支持，部分浏览器还需要增加-webkit-前缀使用。

mask-image遮罩所支持的图片类型非常的广泛，可以是 url()静态图片资源，格式包括 JPG，PNG 以及 SVG 等都是支持的；也可以是动态生成的图片，例如使用各种 CSS3 渐变绘制的图片。语法上支持 CSS3 各类渐变，以及 url()功能符，image()功能符，甚至 element()功能符。同时还支持多背景，因此理论上，使用 mask-image 我们可以遮罩出任意我们想要的图形，非常强大。

语法如下:

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image> values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

示例演示，一个渐变色背景的纯文本元素增加 mask-image 属性后是什么效果呢。

.mask {
  -webkit-mask-size: contain;
 -webkit-mask-image: url(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/161ced10bf344eb085c34cefd8958dd1~tplv-k3u1fbpfcp-watermark.image?);
}

两张图片以渐变的方式合并成为一张图片。