mask-image實現聚光燈效果

搞前端的半夏發表於2022-04-29

大家好,我是半夏?,一個剛剛開始寫文的沙雕程式設計師.如果喜歡我的文章,可以關注➕ 點贊 ? 加我微信:frontendpicker,一起學習交流前端,成為更優秀的工程師~關注公眾號:搞前端的半夏,瞭解更多前端知識! 點我探索新世界!

原文連結 ==>http://sylblog.xin/archives/39

前言

background-image漸變gradient()那些事!圖解background-attachment、clip、repeat、size兩篇文章中,我們介紹了背景圖片,以及背景圖片的裁剪、位置、尺寸、起始位置等等屬性,相信通過前兩章大概可以窺得CSS影像天機了吧。本文我們開始介紹其他關於圖片的屬性!

mask-image

從名稱上面 面具-圖片,大概就知道這個屬性是幹嘛的,屬性值是啥了。
用於設定元素上遮罩層的影像,可以放在所有元素上,甚至包括svg。

不知道有沒有用過PS,在PS中有一個叫做蒙版的東西,蒙版是一種灰度影像。用黑色繪製的區域將隱藏,用白色繪製的區域將可見,而用灰度繪製的區域將以不同級別的透明度出現。

mask-image和這個蒙版差不多,不同的是,mask-image是不透明的地方顯示,透明的地方不顯示。就像是你拿一張黑紙放在電腦螢幕上,你只能看到黑紙所在區域的電腦畫面,其他的地方看不到,解釋道這裡,相信應該明白了,如果不明白就通過下面的例子來理解吧。

相容性

目前來看相容性還是不錯的!

相關屬性

mask-clip

mask-composite

mask-image

mask-mode

mask-origin

mask-position

mask-repeat

mask-size

mask-type

上面這幾個屬性呢background-image的相關屬性用法差不多,所以某些屬性在本文中就不贅述了,想學習的童鞋,請移步主頁檢視。

mask-image

屬性值

none;

沒有圖片,設定了這個屬性,其他的mask-* 屬性自然沒有用處了

url(jpg/png/svg);

這裡我們看一下svg的效果
首先再阿里iconfont上覆制一個svg 儲存為mk.svg

然後來使用它:

#masked {
  width: 200px;
  height: 200px;
  background-color: #8cffa0;
  -webkit-mask-image: url(./mk.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-origin:content-box;
  border: 10px solid #000;
}

<div id="masked"></div>

這裡我們開始來分析:

首先:大家看到的淡黃色的邊框是滑鼠審查元素看到的,真正的是下面這樣,並沒有邊框的

首先我們定義了背景顏色,淡綠色,mask是上面的svg,mask的起始位置是內容區域,最後定義了一個邊框,最後從效果圖中我們可以得出一下結論

1. mask-image 是對整個元素生效的(包括border)

2. mask-image 是mask透明背景顯示,mask不透明背景看不見

3. 我們是無法看到mask本身的內容的,只能看到背景的內容。

漸變

-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent 50%);

mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);

image(url(mask.png), skyblue);

在最新版的谷歌和火狐中均無法識別。

有趣的例子-聚光燈

效果如下:

實現邏輯:

首先是一張作為背景圖片的人物照

一個黑色的圖片作為mask

使用動畫來控制黑色mask的位置,就可以實現

    <style>
      @keyframes mask{
        0% {-webkit-mask-position:0px 60px;}
        15% { -webkit-mask-position:55px 50px;}
        30% {-webkit-mask-position:117px 0px;}
        45% { -webkit-mask-position:110px 110px; -webkit-mask-size:85px 85px;}
        60% { -webkit-mask-position: 173px 8px;-webkit-mask-size: 86px 85px;}
        75% { -webkit-mask-position: 193px 110px;-webkit-mask-size: 80px 80px;}
        90% {-webkit-mask-position: 270px 80px;-webkit-mask-size: 90px 65px;}
        100% {-webkit-mask-size:1000%;}
     }
      .mask {
        width: 300px;
        height: 200px;
        background: url(./哆啦a夢.png);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: url("./black.png");
        -webkit-mask-size:60px 70px;
        animation: mask 5s linear infinite forwards;
      }
    </style>
  </head>
  <body>
    <div class="mask"></div>
  </body>

附上照片,可以自己本地跑跑試試。

總結

通過幾個小例子,相信你對mask-image,屬性應該是很熟悉了,對於文章中提到的一些屬性,文章雖然沒有講解,但是也是很重要的,要學起來!!!可以去看我之前background-image屬性的文章,大致是一樣的。

相關文章