目錄
1 視頻
視頻地址：https://www.bilibili.com/video/BV1Ny4y1U7hp
5分鐘實現CSS毛玻璃效果，王冰冰照片毛玻璃效果
2 知識點
2.1 CSS calc() 函數
CSS calc() 函數用於動態計算長度值。
語法
calc(expression)| 值 |
描述 |
| expression |
必須，一個數學表達式，結果將採用運算後的返回值。 |
需要注意的是，運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；
支持版本：CSS3
2.2 CSS var() 函數
var() 函數用於插入自定義的屬性值，如果一個屬性值在多處被使用，可以使用該方法。
支持版本：CSS3
語法
var(custom-property-name, value)| 值 |
描述 |
| custom-property-name |
必需。自定義屬性的名稱，必需以 -- 開頭。 |
| value |
可選。備用值，在屬性不存在的時候使用。 |
2.3 backdrop-filter
backdrop filter屬性允許我們使用css對元素後面的內容應用過濾效果。
此屬性是定義篩選器屬性的篩選器效果模塊級別1的擴展。它使用與filter屬性相同的語法，但效果將應用於元素的背景。這種影響常見於運行ios7及以上版本的設備接口，以及os x yosemite及以上版本的設備接口。如果沒有這個特性，這種效果只能通過編輯背景圖像本身並應用剪裁和定位技術來實現。
若要使屬性具有任何可見效果，需要從嵌套元素或絕對位置沿Z軸將兩個元素堆疊在一起。另外，應用背景過濾器的元素的背景必須是半透明的。backdrop filter的工作原理是使瀏覽器引擎將目標鎖定在樣式元素後面的內容，而不是元素本身的背景。過濾效果隨後應用於該內容，在最終呈現中，背景與頁面上的其他元素合成。
對元素應用背景過濾器也會創建新的堆疊上下文，就像應用不透明度時一樣。
語法：
backdrop-filter: none | <filter-function-list>首字母： 無
適用於： 所有元素。在svg中，它應用於沒有<defs>元素和所有圖形元素的容器元素
可設置動畫: 是
<filter-function-list>
一個空間分隔的過濾函數列表，應用於它們被聲明的順序。下面是可用的篩選器函數列表，它們與篩選器屬性的篩選器功能相同。
-
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
drop-shadow()
url()
2.4 CSS3 box-sizing 屬性
Box-sizing 屬性允許你以某種方式定義某些元素，以適應指定區域。
例如，假如您需要並排放置兩個帶邊框的框，可通過將 box-sizing 設置爲 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。
| 默認值: | content-box |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.boxSizing="border-box" |
語法
box-sizing: content-box|border-box|inherit:| 值 | 說明 |
|---|---|
| content-box | 這是 CSS2.1 指定的寬度和高度的行爲。指定元素的寬度和高度（最小/最大屬性）適用於box的寬度和高度。元素的填充和邊框佈局和繪製指定寬度和高度除外 |
| border-box | 指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說，對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 |
| inherit | 指定 box-sizing 屬性的值，應該從父元素繼承 |
2.5 實現思路
1. 定義三個box，佈局方式都爲absolute。
2. 第一個box 放背景圖片，第二個box實現模糊過濾，第三個box放要顯示的圖片。
3. 通過監聽鼠標移動，改變css 自定義屬性值，通過calc()， var()函數獲取計算自定義屬性值實現移動效果。
3 參考代碼
3.1 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>毛玻璃效果:微信公衆號AlbertYang</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<section>
<div class="imgBx">
<h1>毛玻璃效果</h1>
</div>
<div class="box box1"></div>
<div class="box box2">
<h1>毛玻璃效果</h1>
</div>
</section>
<script>
const position = document.documentElement;
position.addEventListener('mousemove', e => {
position.style.setProperty('--x', e.pageX + 'px');
position.style.setProperty('--y', e.pageY + 'px');
})
</script>
</body>
</html>
3.2 CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
section .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: url(wbb.jpg);
background-size: 100%;
background-position: calc(var(--x)/5) calc(var(--y)/5);
}
section .box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
}
section .box.box2 {
background: url(wbb.jpg);
background-size: 100%;
clip-path: circle(260px at center);
background-position: calc(var(--x)/5) calc(var(--y)/5);
}
section .box.box2::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 520px;
height: 520px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
z-index: 10;
border-radius: 50%;
}
section h1 {
position: absolute;
margin-top: 30%;
color: #fff;
font-size: 88px;
transform: translate(calc(var(--x)/5), calc(var(--y)/5));
}
今天的學習就到這裏了，由於本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正。如果想繼續學習提高，歡迎關注我，每天學習進步一點點，就是領先的開始，加油。如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！