社区精选|【动画进阶】神奇的 3D 磨砂玻璃透视效果
SegmentFault
共 18868字,需浏览 38分钟
·
2023-08-19 15:30
今天小编为大家带来的是社区作者 chokcoco 的文章,让我们一起来学习实现神奇的 3D 磨砂玻璃透视效果的方法。
-
毛玻璃磨砂效果 -
卡片的 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);
}
-
毛玻璃磨砂效果 -
3D 卡片效果 -
整体透明度和磨砂感、以及卡片的 3D 形态会随着用户移动鼠标而进行动态变化
实现毛玻璃磨砂效果
<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);
}
}
-
正常情况,没有使用任何滤镜; -
元素作用了 filter: blur(6px); -
元素作用了 backdrop-filter: blur(6px)。
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 旋转跟随效果
-
借助了 CSS 3D 的能力 -
元素的旋转需要和鼠标的移动相结合
-
鼠标活动区域 -
旋转物体本身
<body>
<div id="element"></div>
</body>
body {
width: 100vw;
height: 100vh;
transform-style: preserve-3d;
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background: #000;
transform-style: preserve-3d;
}
div {
transform: rotateX(15deg) rotateY(30deg);
}
控制 X 方向的移动
-
当鼠标在中心右侧连续移动,元素绕 Y 轴移动,并且值从 0 开始,越来越大,范围为(0, +∞)deg -
反之,当鼠标在中心左侧连续移动,元素绕 Y 轴移动,并且值从 0 开始,越来越小,范围为(-∞, 0)deg
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 方向的移动
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) ";
};
let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;
结合 X、Y 方向的移动
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);
});
});
设置平滑出入
div {
// 与上述保持一致...
transition: all .2s;
}mouseOverContainer.addEventListener('mouseleave', (e) => {
window.requestAnimationFrame(function(){
element.style.transform = "rotateX(0) rotateY(0)";
});
});
<div id="element"></div>
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;
}
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)";
});
});
透明度变化
-
mask 遮罩,改变 background 的透明度 -
利用 CSS @property 实现 mask 和 background 的渐变角度变换动画效果
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 渐变背景,这样会让背景的渐变角度也跟随变化,能够让整体效果更好
1. CSS @property,让不可能变可能(https://github.com/chokcoco/iCSS/issues/109)
2. 奇妙的 CSS MASK
(https://github.com/chokcoco/iCSS/issues/80)
最后
往期推荐
社区精选|效率max:AI读了源码后再教我
社区精选|透过源码,捋清楚循环依赖到底是如何解决的!
社区精选|【动画进阶】有意思的 Emoji 3D 表情切换效果
评论