【动画进阶】神奇的 3D 磨砂玻璃透视效果
最近，群友分享了一個很有意思的效果：
原效果的網(wǎng)址：frosted-glass。該效果的幾個核心點：
- 毛玻璃磨砂效果
- 卡片的 3D 旋轉(zhuǎn)跟隨效果
- 整體透明度和磨砂感、以及卡片的 3D 形態(tài)會隨著用戶移動鼠標(biāo)而進行動態(tài)變化
原效果實現(xiàn)的較為復(fù)雜，并且實際體驗卡頓感較強。本文，我們就將嘗試一步一步用更為簡單的方式還原復(fù)現(xiàn)這個效果。
構(gòu)建基礎(chǔ)骨架
首先，我們快速實現(xiàn)整個效果的基礎(chǔ)骨架。其核心代碼如下：
<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);
}
基于上述代碼，我們可以快速得到如下效果：
這里，我們實現(xiàn)了一個白色背景的 div 元素，并且給 body 設(shè)置了一張背景圖。
接著，我們就一步一步實現(xiàn)上面說的 3 個關(guān)鍵點：
- 毛玻璃磨砂效果
- 3D 卡片效果
- 整體透明度和磨砂感、以及卡片的 3D 形態(tài)會隨著用戶移動鼠標(biāo)而進行動態(tài)變化
實現(xiàn)毛玻璃磨砂效果
毛玻璃磨砂效果，是最為簡單的一步。在 CSS 中，我們?nèi)缃窨梢允褂?backdrop-filter 濾鏡進行實現(xiàn)。
毛玻璃效果是一種視覺效果，通常用于美化設(shè)計或增加隱私保護。它通過模糊化圖像的某些區(qū)域來達到這種效果，使圖像看起來有一層輕微的模糊，同時仍然清晰可見。毛玻璃效果可以應(yīng)用于圖像、文本、按鈕等各種 UI 元素上，為用戶提供更加優(yōu)雅和良好的視覺體驗。
backdrop-filter 濾鏡最為常見的使用場景，就是實現(xiàn)毛玻璃效果。
在沒有 backdrop-filter 屬性前，我們想實現(xiàn)如下所示的毛玻璃效果，是比較困難的：
在有了 backdrop-filter 屬性后，毛玻璃效果的實現(xiàn)就非常簡單了。
僅僅需要如下一段簡單的代碼：
<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() 即可實現(xiàn)毛玻璃效果。
我們改造一下我們的代碼，添加上毛玻璃效果：
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 旋轉(zhuǎn)跟隨效果
OK，接下來，如何實現(xiàn) 3D 卡片效果呢？
這個效果之前在 讓交互更加生動！有意思的鼠標(biāo)跟隨 3D 旋轉(zhuǎn)動效 實現(xiàn)過一次，我們復(fù)習(xí)一下。
這個交互效果主要有兩個核心：
- 借助了 CSS 3D 的能力
- 元素的旋轉(zhuǎn)需要和鼠標(biāo)的移動相結(jié)合
我們的目標(biāo)是實現(xiàn)這樣一個動畫效果：
這里，我們其實有兩個核心元素：
- 鼠標(biāo)活動區(qū)域
- 旋轉(zhuǎn)物體本身
鼠標(biāo)在鼠標(biāo)活動區(qū)域內(nèi)的移動，會影響旋轉(zhuǎn)物體本身的 3D 旋轉(zhuǎn)，而旋轉(zhuǎn)的方向其實可以被分解為 X 軸方向與 Y 軸方向。
我們來看一下，假設(shè)我們的 HTML 結(jié)構(gòu)如下：
<body>
<div id="element"></div>
</body>
得到這樣一個圖形：
這里，body 的范圍就是整個鼠標(biāo)可活動區(qū)域，也是我們添加鼠標(biāo)的 mousemove 事件的宿主 target，而 #element 就是需要跟隨鼠標(biāo)一起轉(zhuǎn)動的旋轉(zhuǎn)物體本身。
因為整個效果是需要基于 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() 試一下（注意，這里默認(rèn)的旋轉(zhuǎn)圓心即是元素中心）：
div {
transform: rotateX(15deg) rotateY(30deg);
}
效果如下，是有那么點意思了：
好，接下來，我們的目標(biāo)就是通過結(jié)合 mouseover 事件，讓元素動起來。
控制 X 方向的移動
當(dāng)然，為了更加容易理解，我們把動畫拆分為 X、Y 兩個方向上的移動。首先看 X 方向上的移動：
這里，我們需要以元素的中心為界：
- 當(dāng)鼠標(biāo)在中心右側(cè)連續(xù)移動，元素繞 Y 軸移動，并且值從 0 開始，越來越大，范圍為(0, +∞)deg
- 反之，當(dāng)鼠標(biāo)在中心左側(cè)連續(xù)移動，元素繞 Y 軸移動，并且值從 0 開始，越來越小，范圍為(-∞, 0)deg
這樣，我們可以得到這樣一個公式：
rotateY = (鼠標(biāo) x 坐標(biāo) - 元素左上角 x 坐標(biāo) - 元素寬度的一半)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) ";
}
效果如下：
好吧，旋轉(zhuǎn)的太夸張了，因此，我們需要加一個倍數(shù)進行控制：
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) ";
}
通過一個倍數(shù)約束后，效果好了不少：
控制 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) ";
};
效果如下：
當(dāng)然，在這里，我們會發(fā)現(xiàn)方向是元素運動的方向是反的，所以需要做一下取反處理，修改下 calcX 的值，乘以一個 -1 即可：
let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;
結(jié)合 X、Y 方向的移動
OK，到這里，我們只需要把上述的結(jié)果合并一下即可，同時，上面我們使用的是 onmousemove 觸發(fā)每一次動畫移動。現(xiàn)代 Web 動畫中，我們更傾向于使用 requestAnimationFrame 去優(yōu)化我們的動畫，確保每一幀渲染一次動畫即可。
完整的改造后的代碼如下：
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);
});
});
至此，我們就能簡單的實現(xiàn)鼠標(biāo)跟隨 3D 旋轉(zhuǎn)動效：
設(shè)置平滑出入
現(xiàn)在，還有最后一個問題，就是當(dāng)我們的鼠標(biāo)離開活動區(qū)域時，元素的 transform 將停留在最后一幀，正確的表現(xiàn)應(yīng)該是復(fù)原到原狀。因此，我們還需要添加一些事件監(jiān)聽做到元素的平滑復(fù)位。
通過一個 mouseleave 事件配合元素的 transition 即可。
div {
// 與上述保持一致...
transition: all .2s;
}
mouseOverContainer.addEventListener('mouseleave', (e) => {
window.requestAnimationFrame(function(){
element.style.transform = "rotateX(0) rotateY(0)";
});
});
至此，我們就可以完美的實現(xiàn)平滑出入，整體效果最終如下：
完整的代碼，你可以戳這里：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)";
});
});
這樣，我們的當(dāng)前的整個 DEMO 效果就變成了這樣：
透明度變化
OK，最后，剩下最關(guān)鍵一步。我們需要讓整個卡片的磨砂感和透明度不一樣，隨著整體鼠標(biāo)的 Hover 位置而實時發(fā)生變化。
這里我們會用到兩個核心是技術(shù)：
- mask 遮罩，改變 background 的透明度
- 利用 CSS @property 實現(xiàn) mask 和 background 的漸變角度變換動畫效果
這里是整個效果最為復(fù)雜的地方。
我們一個一個來理解。
首先，基于 background 透明度實現(xiàn)的毛玻璃效果，我們可以利用 mask 讓整個毛玻璃效果的透明度不均勻一致。
什么意思呢？看看這張圖：
利用 mask，我們就能讓毛玻璃效果不均與。上述對比圖中，圖 2 和 圖 3 的 mask 的角度分別是 90deg、270deg。
那么，我們只需要在 HOVER 的過程中，動態(tài)的算出當(dāng)前鼠標(biāo)的位置相對于元素中心的角度值，賦值給 mask 即可！
像是這樣：mask: linear-gradient(var(--angle), rgba(255, 255, 255, .5), #fff);，其中 --angle 的值，由 JavaScript 計算，實時傳給 mask 即可。
并且，由于，漸變是不支持過渡動畫的，因此，我們需要 CSS @property 來實現(xiàn) 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()·用于計算當(dāng)前鼠標(biāo)位置相對于元素中心點的角度值- 我們同時將角度變化設(shè)置給了
background漸變背景，這樣會讓背景的漸變角度也跟隨變化，能夠讓整體效果更好
如此一下，我們的整體效果就變成了這樣：
完美！整體動畫連貫，hover 時不卡頓，而且效果絲滑了不少。
至此，我們就完美的還原了整個效果。當(dāng)然，在最后的難點這里，如果你對 mask 和 CSS @property 之前并不了解，代碼看起來以及整體理解起來可能會有所困難，你可以先看看如下兩篇文章：
完整的 DEMO 效果，你可以戳這里 CodePen Demo -- CSS 3D Rotate With Mouse Move
最后
好了，本文到此結(jié)束，希望對你有幫助
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點個 star 訂閱收藏。
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
最后，我的小冊 《CSS 技術(shù)揭秘與實戰(zhàn)通關(guān)》上線了，想了解更多有趣、進階、系統(tǒng)化的 CSS 內(nèi)容，可以猛擊 - LINK。
總結(jié)
以上是生活随笔為你收集整理的【动画进阶】神奇的 3D 磨砂玻璃透视效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： debian 防火墙命令 nft
- 下一篇： java容器基础