【动画进阶】神奇的 3D 磨砂玻璃透视效果
最近，群友分享了一個很有意思的效果：
原效果的網址：frosted-glass。該效果的幾個核心點：
- 毛玻璃磨砂效果
- 卡片的 3D 旋轉跟隨效果
- 整體透明度和磨砂感、以及卡片的 3D 形態會隨著用戶移動鼠標而進行動態變化
原效果實現的較為復雜，并且實際體驗卡頓感較強。本文，我們就將嘗試一步一步用更為簡單的方式還原復現這個效果。
構建基礎骨架
首先，我們快速實現整個效果的基礎骨架。其核心代碼如下：
<div id="element"></div>
body {
width: 100vw;
height: 100vh;
background: url(https://picsum.photos/id/242/1920/1080);
}
div {
width: 600px;
height: 300px;
background: #fff;
box-shadow: 0 20px 40px 1px rgba(0, 0, 0, 0.12);
}
基于上述代碼，我們可以快速得到如下效果：
這里，我們實現了一個白色背景的 div 元素，并且給 body 設置了一張背景圖。
接著，我們就一步一步實現上面說的 3 個關鍵點：
- 毛玻璃磨砂效果
- 3D 卡片效果
- 整體透明度和磨砂感、以及卡片的 3D 形態會隨著用戶移動鼠標而進行動態變化
實現毛玻璃磨砂效果
毛玻璃磨砂效果，是最為簡單的一步。在 CSS 中，我們如今可以使用 backdrop-filter 濾鏡進行實現。
毛玻璃效果是一種視覺效果，通常用于美化設計或增加隱私保護。它通過模糊化圖像的某些區域來達到這種效果，使圖像看起來有一層輕微的模糊，同時仍然清晰可見。毛玻璃效果可以應用于圖像、文本、按鈕等各種 UI 元素上，為用戶提供更加優雅和良好的視覺體驗。
backdrop-filter 濾鏡最為常見的使用場景，就是實現毛玻璃效果。
在沒有 backdrop-filter 屬性前，我們想實現如下所示的毛玻璃效果，是比較困難的：
在有了 backdrop-filter 屬性后，毛玻璃效果的實現就非常簡單了。
僅僅需要如下一段簡單的代碼：
<div class="bg">
<div>Normal</div>
<div class="g-filter">filter</div>
<div class="g-backdrop-filter">backdrop-filter</div>
</div>
.bg {
background: url(image.png);
& > div {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, .7);
}
.g-filter {
filter: blur(6px);
}
.g-backdrop-filter {
backdrop-filter: blur(6px);
}
}
下面列出了 3 種效果，分別是：
- 正常情況，沒有使用任何濾鏡；
- 元素作用了
filter: blur(6px)； - 元素作用了
backdrop-filter: blur(6px)。
效果對比圖如下：
完整代碼，戳這里：CodePen Demo -- filter 與 backdrop-filter 對比
這里的核心就在于，使用透明背景，加上 backdrop-filter: blur() 即可實現毛玻璃效果。
我們改造一下我們的代碼，添加上毛玻璃效果：
div {
width: 600px;
height: 300px;
backdrop-filter: blur(15px);
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5));
box-shadow: 0 20px 40px 1px rgba(0, 0, 0, 0.12);
}
效果如下：
卡片的 3D 旋轉跟隨效果
OK，接下來，如何實現 3D 卡片效果呢？
這個效果之前在 讓交互更加生動！有意思的鼠標跟隨 3D 旋轉動效 實現過一次，我們復習一下。
這個交互效果主要有兩個核心：
- 借助了 CSS 3D 的能力
- 元素的旋轉需要和鼠標的移動相結合
我們的目標是實現這樣一個動畫效果：
這里，我們其實有兩個核心元素：
- 鼠標活動區域
- 旋轉物體本身
鼠標在鼠標活動區域內的移動，會影響旋轉物體本身的 3D 旋轉，而旋轉的方向其實可以被分解為 X 軸方向與 Y 軸方向。
我們來看一下，假設我們的 HTML 結構如下：
<body>
<div id="element"></div>
</body>
得到這樣一個圖形：
這里，body 的范圍就是整個鼠標可活動區域，也是我們添加鼠標的 mousemove 事件的宿主 target，而 #element 就是需要跟隨鼠標一起轉動的旋轉物體本身。
因為整個效果是需要基于 CSS 3D 的，我們首先加上簡單的 CSS 3D 效果：
body {
width: 100vw;
height: 100vh;
transform-style: preserve-3d;
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background: #000;
transform-style: preserve-3d;
}
效果如下：
沒有什么不一樣。這是因為還沒有添加任何的 3D 變換，我們給元素添加 X、Y 兩個方向的 rotate() 試一下（注意，這里默認的旋轉圓心即是元素中心）：
div {
transform: rotateX(15deg) rotateY(30deg);
}
效果如下，是有那么點意思了：
好，接下來，我們的目標就是通過結合 mouseover 事件，讓元素動起來。
控制 X 方向的移動
當然，為了更加容易理解，我們把動畫拆分為 X、Y 兩個方向上的移動。首先看 X 方向上的移動：
這里，我們需要以元素的中心為界：
- 當鼠標在中心右側連續移動，元素繞 Y 軸移動，并且值從 0 開始，越來越大，范圍為(0, +∞)deg
- 反之，當鼠標在中心左側連續移動，元素繞 Y 軸移動，并且值從 0 開始，越來越小，范圍為(-∞, 0)deg
這樣，我們可以得到這樣一個公式：
rotateY = (鼠標 x 坐標 - 元素左上角 x 坐標 - 元素寬度的一半)deg
通過綁定 onmousemove 事件，我們嘗試一下：
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");
mouseOverContainer.onmousemove = function(e) {
let box = element.getBoundingClientRect();
let calcY = e.clientX - box.x - (box.width / 2);
element.style.transform = "rotateY(" + calcY + "deg) ";
}
效果如下：
好吧，旋轉的太夸張了，因此，我們需要加一個倍數進行控制：
const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");
mouseOverContainer.onmousemove = function(e) {
let box = element.getBoundingClientRect();
let calcY = (e.clientX - box.x - (box.width / 2)) / multiple;
element.style.transform = "rotateY(" + calcY + "deg) ";
}
通過一個倍數約束后，效果好了不少：
控制 Y 方向的移動
同理，我們利用上述的方式，同樣可以控制 Y 方向上的移動：
const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");
mouseOverContainer.onmousemove = function(e) {
let box = element.getBoundingClientRect();
let calcX = (e.clientY - box.y - (box.height / 2)) / multiple;
element.style.transform = "rotateX(" + calcX + "deg) ";
};
效果如下：
當然，在這里，我們會發現方向是元素運動的方向是反的，所以需要做一下取反處理，修改下 calcX 的值，乘以一個 -1 即可：
let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;
結合 X、Y 方向的移動
OK，到這里，我們只需要把上述的結果合并一下即可，同時，上面我們使用的是 onmousemove 觸發每一次動畫移動。現代 Web 動畫中，我們更傾向于使用 requestAnimationFrame 去優化我們的動畫，確保每一幀渲染一次動畫即可。
完整的改造后的代碼如下：
const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");
function transformElement(x, y) {
let box = element.getBoundingClientRect();
let calcX = -(y - box.y - (box.height / 2)) / multiple;
let calcY = (x - box.x - (box.width / 2)) / multiple;
element.style.transform = "rotateX("+ calcX +"deg) "
+ "rotateY("+ calcY +"deg)";
}
mouseOverContainer.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
transformElement(e.clientX, e.clientY);
});
});
至此，我們就能簡單的實現鼠標跟隨 3D 旋轉動效：
設置平滑出入
現在，還有最后一個問題，就是當我們的鼠標離開活動區域時，元素的 transform 將停留在最后一幀，正確的表現應該是復原到原狀。因此，我們還需要添加一些事件監聽做到元素的平滑復位。
通過一個 mouseleave 事件配合元素的 transition 即可。
div {
// 與上述保持一致...
transition: all .2s;
}
mouseOverContainer.addEventListener('mouseleave', (e) => {
window.requestAnimationFrame(function(){
element.style.transform = "rotateX(0) rotateY(0)";
});
});
至此，我們就可以完美的實現平滑出入，整體效果最終如下：
完整的代碼，你可以戳這里：CodePen Demo -- CSS 3D Rotate With Mouse Move
基于上述的鋪墊，我們改造一下我們的 DEMO，只是把上述 DEMO 中中心的黑塊，替換成我們的毛玻璃元素，將背景替換成圖片。
完整的代碼：
<div id="element"></div>
CSS 代碼：
body {
width: 100vw;
height: 100vh;
transform-style: preserve-3d;
background: url(https://picsum.photos/id/242/1920/1080);
}
div {
width: 600px;
height: 300px;
transform-style: preserve-3d;
backdrop-filter: blur(15px);
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5));
transition: all 0.3s;
}
Javascript 代碼：
const multiple = 25;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");
function transformElement(x, y) {
const box = element.getBoundingClientRect();
const calcX = -(y - box.y - (box.height / 2)) / multiple;
const calcY = (x - box.x - (box.width / 2)) / multiple;
let angle = Math.floor(getMouseAngle((y - box.y - (box.height / 2)), (x - box.x - (box.width / 2))));
element.style.transform = "rotateX("+ calcX +"deg) " + "rotateY("+ calcY +"deg)";
}
mouseOverContainer.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
transformElement(e.clientX, e.clientY);
});
});
mouseOverContainer.addEventListener('mouseleave', (e) => {
window.requestAnimationFrame(function(){
element.style.transform = "rotateX(0) rotateY(0)";
});
});
這樣，我們的當前的整個 DEMO 效果就變成了這樣：
透明度變化
OK，最后，剩下最關鍵一步。我們需要讓整個卡片的磨砂感和透明度不一樣，隨著整體鼠標的 Hover 位置而實時發生變化。
這里我們會用到兩個核心是技術：
- mask 遮罩，改變 background 的透明度
- 利用 CSS @property 實現 mask 和 background 的漸變角度變換動畫效果
這里是整個效果最為復雜的地方。
我們一個一個來理解。
首先，基于 background 透明度實現的毛玻璃效果，我們可以利用 mask 讓整個毛玻璃效果的透明度不均勻一致。
什么意思呢？看看這張圖：
利用 mask，我們就能讓毛玻璃效果不均與。上述對比圖中，圖 2 和 圖 3 的 mask 的角度分別是 90deg、270deg。
那么，我們只需要在 HOVER 的過程中，動態的算出當前鼠標的位置相對于元素中心的角度值，賦值給 mask 即可！
像是這樣：mask: linear-gradient(var(--angle), rgba(255, 255, 255, .5), #fff);，其中 --angle 的值，由 JavaScript 計算，實時傳給 mask 即可。
并且，由于，漸變是不支持過渡動畫的，因此，我們需要 CSS @property 來實現 mask 角度變化的動畫效果。
這里核心的代碼如下：
div {
width: 600px;
height: 300px;
backdrop-filter: blur(15px);
background: linear-gradient(var(--angle), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5));
mask: linear-gradient(var(--angle), rgba(255, 255, 255, .5), #fff);
transition: all 0.3s, --angle 0.3s;
}
const multiple = 25;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");
function transformElement(x, y) {
const box = element.getBoundingClientRect();
const calcX = -(y - box.y - (box.height / 2)) / multiple;
const calcY = (x - box.x - (box.width / 2)) / multiple;
let angle = Math.floor(getMouseAngle((y - box.y - (box.height / 2)), (x - box.x - (box.width / 2))));
element.style.transform = "rotateX("+ calcX +"deg) " + "rotateY("+ calcY +"deg)";
element.style.setProperty("--angle", `${-angle}deg`);
}
function getMouseAngle(x, y) {
const radians = Math.atan2(y, x);
let angle = radians * (180 / Math.PI);
if (angle < 0) {
angle += 360;
}
return angle;
}
mouseOverContainer.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
transformElement(e.clientX, e.clientY);
});
});
mouseOverContainer.addEventListener('mouseleave', (e) => {
window.requestAnimationFrame(function(){
element.style.transform = "rotateX(0) rotateY(0)";
});
});
上面的代碼，有兩點需要再解釋一下：
getMouseAngle()·用于計算當前鼠標位置相對于元素中心點的角度值- 我們同時將角度變化設置給了
background漸變背景，這樣會讓背景的漸變角度也跟隨變化，能夠讓整體效果更好
如此一下，我們的整體效果就變成了這樣：
完美！整體動畫連貫，hover 時不卡頓，而且效果絲滑了不少。
至此，我們就完美的還原了整個效果。當然，在最后的難點這里，如果你對 mask 和 CSS @property 之前并不了解，代碼看起來以及整體理解起來可能會有所困難，你可以先看看如下兩篇文章：
- CSS @property，讓不可能變可能
- 奇妙的 CSS MASK
完整的 DEMO 效果，你可以戳這里 CodePen Demo -- CSS 3D Rotate With Mouse Move
最后
好了，本文到此結束，希望對你有幫助
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
最后，我的小冊 《CSS 技術揭秘與實戰通關》上線了，想了解更多有趣、進階、系統化的 CSS 內容，可以猛擊 - LINK。
總結
以上是生活随笔為你收集整理的【动画进阶】神奇的 3D 磨砂玻璃透视效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 多图：一文带你入门掌握JVM所有知识点
- 下一篇： Sql Server维护计划事务日志找不