公司在开发官网的过程中，会出现涉及到一些图片的mouseover效果。悬停后，原始图像将发生变化。简单的渐变淡入淡出、放大缩小、左右平移已经不能满足产品经理的期望。总觉得不够惊艳，不够有创意。其实作为一个开发者，我并不满足于普通的日常动画交互效果。在寻找新思路的时候，发现CSSmask-image可以实现很多不错的效果。本文将基于该属性实现四种图片转场动画效果。前置知识点mask-imagemask-imageCSS属性用于设置元素上遮罩层的图像。默认值为none，即无遮罩图像。因此，类似于border属性中的border-style属性，是必须设置才能生效的属性值。请注意，由于该属性尚未完全支持，因此某些浏览器还需要添加-webkit-前缀。mask-image支持的图片类型广泛，可以是url()静态图片资源，JPG、PNG、SVG等格式都支持；它们也可以是动态生成的图像，例如使用各种CSS3渐变绘制图片。语法上支持CSS3渐变，以及url()函数、image()函数，甚至element()函数。同时它还支持多种背景，所以理论上使用mask-image我们可以屏蔽掉任何我们想要的图形，非常强大。语法如下：/*value*/mask-image:url(masks.svg#mask1);/*values*/mask-image:linear-gradient(rgba(0,0,0,1.0),透明);mask-image:image(url(mask.png),skyblue);/*多值*/mask-image:image(url(mask.png),skyblue),linear-gradient(rgba(0,0,0,1.0),透明);该示例演示了将mask-image属性添加到具有渐变背景的纯文本元素的效果。.mask{-webkit-mask-size:包含;-webkit-mask-image:url(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/161ced10bf344eb085c34cefd8958dd1~tplv-k3u1fbpfcp-watermark.image?);}两张图片合并为一张图片以渐变的方式。.scene-2{背景图片：url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd9e83460a5645ccb78dc1c8efb86871~tplv-k3u1fbpfcp-watermark.image?);-webkit-mask-image:linear-gradient(toright,transparent8%,#fff30%);}如上图1所示，使用mask-image属性设置一个png格式的客服图标，整个元素只会显示png图片的内容区域，其他区域都没有了。如图2所示，使用mask-image属性设置渐变颜色，使两个图像在渐变叠加中混合在一起。mask-image的主要功能想必大家都看出来了。当使用CSSmask属性时，它是mask:xxx。现在随着这个属性的规范化，mask属性其实变成了很多mask-\*的缩写，除了mask-image还有以下属性，用法和cssbackground类似，具体属性值请参考mask遮罩层的详细解释。mask-modemask-repeatmask-positionmask-clipmask-originmask-sizemask-typemask-composite介绍了主要的前置知识点，接下来进入具体的动画效果和实现过程。效果是在一张或两张图片之间切换的过渡效果。在动画开始之前，中间有一个透明图标。动画开始后，图标不断放大，直到图标放大到全屏。这个时候，已经过渡到了第二张图。整个过程相当爽。基于以上前置知识点，你可以很快想到相应的实现方法。在这里您需要使用其他几个属性。用法类似于background:mask-size:如动图所示，中间的png图标由小尺寸放大，那么就需要这个属性来控制图标的大小变化。mask-position：图标始终在水平和垂直中心位置放大，图像的起始位置需要该属性。mask-repeat：类似background，如果不设置no-repeat，图标会重复整个界面动画效果示意图如下：核心代码如下：.scene-2{background-图片：网址（https://assets.codepen.io/77020/sw-shape-zoom-scene-2.jpg）；-webkit-mask-image:url(https://assets.codepen.io/77020/sw-jedi-crest.svg);-webkit-mask-size:10%;-webkit-掩码位置：中心；-webkit-mask-repeat:no-repeat;}.scenes:is(:hover,:focus).scene-2{animation:scene-transition4scubic-bezier(1,0,1,1)forwards;}@keyframesscene-transition{100%{-webkit-mask-size:1800%;}}此时整体的动画效果基本完成，但是还有一些细节需要优化。图标中的图片在动画开始之前就已经看过了，所以和整个界面对比起来不够亮。所以第二张图的亮度需要默认设置，当动画进行到一定阶段时才会全部显示出来。代码如下：.scene-2{filter:brightness(0%);}@keyframesscene-transition{25%{filter:brightness(100%);}100%{过滤器：亮度（100%）；}}代码在线预览：https://code.juejin.cn/pen/71...效果2如效果图所示，这里使用了conic-gradient，通过一个完整的conicgradient对图片进行过渡。与上面的例子2类似，只是将linear-gradient线性渐变改为conic-gradient圆锥渐变，通过控制圆锥渐变的角度来完成画面的过渡效果。动画效果示例如下：核心代码如下：@property--angle{syntax:'';继承：真；initial-value:-10deg;}.scene-2{background-image:url(https://assets.codepen.io/77020/sw-clock-wipe-scene-2.jpg);z-指数：-1；-webkit-mask-image:conic-gradient(#fff0deg,#fffcalc(var(--angle)-10deg),transparentcalc(var(--angle)+10deg),transparent360deg),圆锥-gradient(transparent340deg,#fff360deg);}.scenes:is(:hover,:focus).scene-2{z-index:1;动画：场景转换2s线性向前；}@keyframes场景转换{到{--angle:370deg;}}代码在线预览：https://code.juejin.cn/pen/71...效果3这个效果由效果2的锥形渐变改为radial-gradient径向渐变，控制渐变的范围从根本不覆盖整个元素。动画效果示例图如下：核心代码如下：@property--radius{syntax:'';继承：真；初始值：-5%；}@keyframesscene-transition{to{--radius:105%;}}.scene-2{背景图片：url(https://assets.codepen.io/77020/sw-iris-wipe-scene-2.jpg);-webkit-mask-image:radial-gradient(circle,#fffcalc(var(--radius)-5%),transparentcalc(var(--radius)+5%));}.scenes:is(:hover,:focus).scene-2{animation:scene-transition2slinearforwards;}代码在线预览：https://code.juejin.cn/pen/71...效果4这个效果是一样的即在Example2中，使用linear-gradient来transitionimages，这里设置mask-size为width的两倍，前半部分设置为透明色，那么你还是会看到第一张图。触发动画时，将蒙版位置从左更改为右。动画效果示例如下：核心代码如下：.scene-2{background-image:url(https://assets.codepen.io/77020/sw-horizo??ntal-wipe-scene-2.jpg);-webkit-mask-image:线性渐变（向右，透明47.5%，#fff52.5%）；-webkit-mask-size:210%;-webkit-mask-position:left;}.scenes:is(:hover,:focus).scene-2{-webkit-mask-position:right;transition:-webkit-mask-position2slinear;}代码在线预览：https://code.juejin.cn/pen/71...最后，本文基于CSSmask-image实现四种图片过渡效果。我相信这些效果可以打动你的老板，让你的项目很酷。如果最后觉得有用，记得点赞收藏，说不定哪天你会用到。专注于前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）参考mask-image：https://developer.mozilla.org...codepen：https://codepen.io/lonkorean...mask遮罩层详解：https://blog.csdn.net/qq_3268...CSSmask-image属性详解：https://www.php.cn/css-教程...
