目錄
1 視頻
2 知識點
2.1 CSS calc() 函式
2.2 CSS var() 函式
2.3 backdrop-filter
2.4 CSS3 box-sizing 屬性
2.5 實作思路
3 參考代碼
3.1 HTML
3.2 CSS
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));
}
今天的學習就到這里了，由于本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正，如果想繼續學習提高，歡迎關注我，每天學習進步一點點，就是領先的開始，加油，如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/240939.html
標籤：AI