會用PS的童鞋一定知道“蒙版”的概念，它可以在圖片上實現一定的遮罩效果，當然這里我們不介紹ps里的蒙版，而是介紹利用CSS3的新屬性-webkit-mask來實現網頁中的圖片遮罩效果。 大家對-webkit-mask這一屬性可能不太熟悉，或許有很多人都是第一次見到，沒錯，這一屬性也是還未被眾多 ...

-webkit-mask： 蒙版，用於將固定形狀設置透明度，形狀可以是一個div，也可以是一張圖片； 用法：-webkit-mask: radial-gradient(transparent 50px, rgb(0,0,0) 51px); ...

前不久做了一個項目，需要一個小效果，就是獲取用戶頭像以心形的形狀展現在頁面上，開始小五想的實現方式是canvas畫圖或CSS3的clip（剪切），發現都不理想，和設計稿里的圖形美觀度相差太大，而且實現起來太麻煩，后來，小五采用了一個CSS3的新增屬性完美的解決了這個問題，今天就來和大家分享 ...

有一個頁面的調用不了jquery，我選擇用純粹的javascript來實現一個交互效果。 要求是這樣的，點擊一個圖標后，彈出一個二維碼圖片，彈出的位置是在鼠標的周圍。 原理是這樣的：先彈出一個mask 也就是一個div 設置他的z-index屬性 再彈出輸入框，他的z-index屬性要大於 ...

mask demo效果演示：http://dtdxrk.github.io/game/css3-demo/mask.html mask 的屬性： -webkit-mask-image:url | gradient /*可以使用圖片或漸變作為遮罩層 ...

經常看一些 LOL 比賽直播的小伙伴，肯定都知道，在一些彈幕網站（Bilibili、虎牙）中，當人物與彈幕出現在一起的時候，彈幕會“巧妙”的躲到人物的下面，看着非常的智能。 簡單的一個截圖例子： 其實，這里是運用了 CSS 中的 MASK 屬性實現的。 mask 簡單用法介紹 之前 ...

最近在b站上看到一種彈幕效果叫做智能防擋彈幕，也就是傳說中的蒙版彈幕， 打開之后效果大概是這樣的 再也不用擔心男神女神的絕世容顏被花里胡哨的彈幕擋住啦，是不是感覺很神奇。 實現原理其實就是類似於ps的蒙版，也就是說將圖像的一部分 “隱藏”。這里我們需要用到的是css3的mask遮罩屬性 ...

需要js 思路：假設目標元素是target。在外層定義元素寬高等於target，通過border設置元素鋪滿整個文檔，設置border的透明圖，實現蒙版，在元素的內部設置子元素，寬高100%;設置圓角邊框50%； 設置box-shadow inset顯示 代碼： css ...