有人知道这种悬浮盒子阴影跟随鼠标旋转动效生成网站吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 202 天前的主题，其中的信息可能已经有所发展或是发生改变。

网站地址： https://www.leohuynh.dev/
大家可以看到这个博主右侧的这种效果，卡片跟随鼠标旋转
我之前看到过一个类似的开源库网站，也是可以直接调节阴影，颜色等各种参数，然后直接生成代码，非常方便
但是我忘记那个网站地址了，请问大家知道吗

开源库

网站

动效

生成

2 条回复 • 2023-10-14 07:27:19 +08:00

rabbbit

202 天前

<!DOCTYPE html>
<html lang="en">
　<head>
　　<meta charset="UTF-8" />
　　<meta name="viewport" content="width=device-width, initial-scale=1.0" />
　　<title>Document</title>
　　<style>
　　　.card-mask {
　　　　 width: 300px;
　　　　 height: 500px;
　　　　 perspective: 600px;
　　　　 margin: 50px;
　　　}

　　　.card {
　　　　 height:100%;
　　　　 outline: 4px solid;
　　　　 border-radius: 8px;
　　　}
　　</style>
　</head>
　<body>
　　<div class="card-mask">
　　　<div class="card"></div>
　　</div>
　　<script>
　　　 const cardMask = document.querySelector(".card-mask");
　　　 const card = document.querySelector(".card");
　　　 cardMask.addEventListener("mousemove", (e) => {
　　　　 let { clientX: s, clientY: n } = e,
　　　　　{
　　　　　　 width: i,
　　　　　　 height: r,
　　　　　　 x: o,
　　　　　　 y: l,
　　　　　} = cardMask.getBoundingClientRect(),
　　　　　 c = {
　　　　　　 x: 15 - (Math.abs(n - l) / r) * 30,
　　　　　　 y: -15 + (Math.abs(s - o) / i) * 30,
　　　　　};
　　　　 card.style.transform = "rotateX("
　　　　　.concat(c.x, "deg) rotateY(")
　　　　　.concat(c.y, "deg)");
　　　});
　　</script>
　</body>
</html>

lyc575757

201 天前 via Android

https://atroposjs.com/
是这个吗

有人知道这种 悬浮盒子阴影 跟随鼠标旋转 动效生成网站吗

有人知道这种悬浮盒子阴影跟随鼠标旋转动效生成网站吗