在給公司開發(fā)官網(wǎng)的過程中丰涉，會有涉及到一些圖片的鼠標(biāo)懸停效果拓巧，鼠標(biāo)懸停后會改變原圖，單純的漸隱漸現(xiàn)一死，放大縮小肛度，左右平移已經(jīng)滿足不了產(chǎn)品經(jīng)理期望了，總覺得不夠驚艷投慈，創(chuàng)意不夠贤斜。其實作為一個開發(fā)者，也不會滿足這普通日常的動畫交互效果逛裤，在尋找新的 idea 時發(fā)現(xiàn)基于 CSS mask-image 可以實現(xiàn)很多不錯的效果瘩绒，本文將基于此屬性實現(xiàn)四種圖片過渡動畫效果。
前置知識點 mask-image
mask-image CSS 屬性用于設(shè)置元素上遮罩層的圖像带族。默認(rèn)值是 none锁荔，也就是無遮罩圖片。因此蝙砌，和 border 屬性中的 border-style 屬性類似阳堕，是一個想要有效果就必須設(shè)定的屬性值跋理。注意由于此屬性目前還不是完全支持，部分瀏覽器還需要增加-webkit-前綴使用恬总。
mask-image遮罩所支持的圖片類型非常的廣泛前普，可以是 url()靜態(tài)圖片資源，格式包括 JPG壹堰，PNG 以及 SVG 等都是支持的拭卿；也可以是動態(tài)生成的圖片，例如使用各種 CSS3 漸變繪制的圖片贱纠。語法上支持 CSS3 各類漸變峻厚，以及 url()功能符，image()功能符谆焊，甚至 element()功能符惠桃。同時還支持多背景，因此理論上辖试，使用 mask-image 我們可以遮罩出任意我們想要的圖形辜王，非常強(qiáng)大。
語法如下:
/* <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?);
}
兩張圖片以漸變的方式合并成為一張圖片。
.scene-2 {
background-image: url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd9e83460a5645ccb78dc1c8efb86871~tplv-k3u1fbpfcp-watermark.image?);
-webkit-mask-image: linear-gradient(to right, transparent 8%, #fff 30%);
}
如上圖 1 所示肾档，使用 mask-image 屬性設(shè)置了一個 png 格式的客服圖標(biāo)摹恰，整個元素將只顯示 png 圖像的內(nèi)容區(qū)域，其他區(qū)域都消失不見了怒见。如圖 2 所示俗慈，使用 mask-image 屬性設(shè)置漸變顏色，使兩種圖片以漸變疊加的方式融合在了一起遣耍。
想必大家可以看出 mask-image 的主要功能了吧闺阱，CSS mask 屬性在使用的時候就是 mask: xxx，現(xiàn)在隨著這個屬性的規(guī)范化舵变，mask 屬性實際上已經(jīng)成為了諸多 mask-\*的縮寫酣溃，除了 mask-image 還有以下屬性，用法和 CSS background 用法是相仿的纪隙，具體屬性值可以看 mask 遮罩層詳解赊豌。
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite
介紹完主要的前置知識點，接下來就進(jìn)入到具體的動畫效果和實現(xiàn)過程绵咱。
效果一
兩張圖片切換的過渡效果碘饼，動畫開始前中間定位了一個透明的圖標(biāo)，動畫開始后圖標(biāo)不斷放大，直到圖標(biāo)放大到全屏此時已過渡到第二張圖片艾恼，整個過程相當(dāng)炫酷住涉。基于上面的前置知識點钠绍，很快可想到對應(yīng)的實現(xiàn)方式舆声，這里需要額外用到其他的幾個屬性，用法和 background 類似：
-
mask-size： 如動畫所示柳爽，中間的 png 圖標(biāo)從小放大媳握，則需要這個屬性控制圖標(biāo)的大小變化 -
mask-position： 圖標(biāo)一直是保持在水平垂直居中的位置放大，則需要這個屬性圖像的起始位置 -
mask-repeat：和background類似泻拦，不設(shè)置no-repeat圖標(biāo)會重復(fù)整個界面
動畫效果示意圖如下：
核心代碼如下：
.scene-2 {
background-image: url(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-mask-position: center;
-webkit-mask-repeat: no-repeat;
}
.scenes:is(:hover, :focus) .scene-2 {
animation: scene-transition 4s cubic-bezier(1, 0, 1, 1) forwards;
}
@keyframes scene-transition {
100% {
-webkit-mask-size: 1800%;
}
}
這時整體動畫效果基本完成了毙芜，但是還有細(xì)節(jié)繼續(xù)優(yōu)化忽媒，動畫開始前圖標(biāo)內(nèi)的圖片已經(jīng)看到争拐，這樣對比整個界面不夠鮮明美觀，所以需要默認(rèn)設(shè)置第二張圖片的亮度晦雨，當(dāng)動畫進(jìn)行到一定的階段再徹底顯示出來架曹。
代碼如下：
.scene-2 {
filter: brightness(0%);
}
@keyframes scene-transition {
25% {
filter: brightness(100%);
}
100% {
filter: brightness(100%);
}
}
代碼在線預(yù)覽：
https://code.juejin.cn/pen/7121173655316332580
效果二
如效果圖所示，這里用到了錐形漸變 conic-gradient闹瞧，通過一個完整的錐形漸變過渡圖片绑雄。和上面的示例二類似，只不過把 linear-gradient 線性漸變改變?yōu)?conic-gradient 錐形漸變奥邮，通過控制錐形漸變的角度完成圖片的過渡效果万牺，動畫效果示例圖如下：
核心代碼如下：
@property --angle {
syntax: '<angle>';
inherits: true;
initial-value: -10deg;
}
.scene-2 {
background-image: url(https://assets.codepen.io/77020/sw-clock-wipe-scene-2.jpg);
z-index: -1;
-webkit-mask-image:
conic-gradient(
#fff 0deg,
#fff calc(var(--angle) - 10deg),
transparent calc(var(--angle) + 10deg),
transparent 360deg
),
conic-gradient(
transparent 340deg,
#fff 360deg
);
}
.scenes:is(:hover, :focus) .scene-2 {
z-index: 1;
animation: scene-transition 2s linear forwards;
}
@keyframes scene-transition {
to { --angle: 370deg; }
}
代碼在線預(yù)覽：
https://code.juejin.cn/pen/7121174793981788196
效果三
此效果由效果二的錐形漸變改變?yōu)?radial-gradient 徑向漸變，控制漸變的范圍從完全不見到覆蓋整個元素洽腺。動畫效果示例圖如下：
核心代碼如下：
@property --radius {
syntax: '<percentage>';
inherits: true;
initial-value: -5%;
}
@keyframes scene-transition {
to { --radius: 105%; }
}
.scene-2 {
background-image: url(https://assets.codepen.io/77020/sw-iris-wipe-scene-2.jpg);
-webkit-mask-image: radial-gradient(
circle,
#fff calc(var(--radius) - 5%),
transparent calc(var(--radius) + 5%)
);
}
.scenes:is(:hover, :focus) .scene-2 {
animation: scene-transition 2s linear forwards;
}
代碼在線預(yù)覽：
https://code.juejin.cn/pen/7121179125821210654
效果四
此效果和示例二中的效果一樣脚粟，使用 linear-gradient 線性漸變過渡圖片，這里將 mask-size 設(shè)置寬度的兩倍蘸朋，前面一半設(shè)置為透明色核无，則看到的還是第一張圖片。觸發(fā)動畫的時候改變 mask-position 從 left 變更為 right藕坯，動畫效果示例圖如下：
核心代碼如下：
.scene-2 {
background-image: url(https://assets.codepen.io/77020/sw-horizontal-wipe-scene-2.jpg);
-webkit-mask-image: linear-gradient(
to right,
transparent 47.5%,
#fff 52.5%
);
-webkit-mask-size: 210%;
-webkit-mask-position: left;
}
.scenes:is(:hover, :focus) .scene-2 {
-webkit-mask-position: right;
transition: -webkit-mask-position 2s linear;
}
代碼在線預(yù)覽：
https://code.juejin.cn/pen/7121181551152332814
最后
本文基于 CSS mask-image 實現(xiàn)了四種圖片過渡效果团南，相信這幾種效果能夠讓你的老板眼前一亮，讓你的項目炫酷起來吧炼彪⊥赂看到最后如果覺得有用，記得點個贊收藏起來辐马，說不定哪天就用上啦拷橘。
專注前端開發(fā)，分享前端相關(guān)技術(shù)干貨，公眾號：南城大前端（ID: nanchengfe）
參考
mask-image:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
codepen：https://codepen.io/lonekorean/details/eYVrWoq
mask 遮罩層詳解：https://blog.csdn.net/qq_32682137/article/details/83751176
CSS的mask-image屬性詳解
：https://www.php.cn/css-tutorial-389418.html
