前几天在网上看到了一个很有趣的动画效果，如下，光会跟随鼠标在卡片上进行移动，并且卡片会有视差的效果。
那么在 Vue3 中应该如何去实现这个效果呢？
图片
其实实现思路很简单，无非就是分几步：
我们先在 Index.vue 中准备一个卡片页面，光的CSS效果可以使用filter: blur() 来实现。
图片
可以看到现在的效果是这样：
图片
在实现之前我们需要注意几点：
1、鼠标移入时需要设置卡片 overflow: hidden，否则光会溢出，而鼠标移出时记得还原。
2、获取鼠标坐标时需要用clientX/Y而不是pageX/Y，因为前者会把页面滚动距离也算进去，比较严谨。
刚刚说到实现思路时我们说到了mouseenter、mousemove、mouseleave，其实mouseenter、mouseleave 这二者的逻辑比较简单，重点是 mouseover 这个监听函数。
而在 mouseover 这个函数中，最重要的逻辑就是：光怎么跟随鼠标移动呢？
或者也可以这么说：怎么计算光相对于卡片盒子的 left 和 top。
对此我专门画了一张图，相信大家一看就懂怎么算了。
图片
知道了怎么计算，那么逻辑的实现也很明了了~封装一个use-light-card.ts：
图片
接着在页面中去使用：
图片
这样就能实现基本的效果啦~
图片
卡片的视差效果需要用到样式中 transform 样式，主要是配置四个东西：
图片
现在就有了卡片视差的效果啦~
图片
上面只是给一个卡片增加光源，接下来可以给每一个卡片都增加光源啦！！！
图片
图片
上面的代码，总感觉这个 hooks 耦合度太高不太通用，所以我们可以让光源变成可配置化，这样每个卡片就可以展示不同大小、颜色的光源了~像下面一样。
图片
既然是配置化，那我们希望是这么去使用 hooks 的，我们并不需要自己在页面中去写光源的dom节点，也不需要自己去写光源的样式，而是通过配置传入 hooks 中。
所以 hooks 内部要自己通过操作 DOM 的方式，去添加、删除光源，可以使用createElement、appendChild、removeChild 去做这些事~。
图片
<!-- Index.vue --><template> <div class="container"> <!-- 方块盒子 --> <div class="item" ref="cardRef1"></div> <!-- 方块盒子 --> <div class="item" ref="cardRef2"></div> <!-- 方块盒子 --> <div class="item" ref="cardRef3"></div> </div></template><script setup lang="ts">import { useLightCard } from './use-light-card';const { cardRef: cardRef1 } = useLightCard();const { cardRef: cardRef2 } = useLightCard({ light: { color: '#ffffff', width: 100, },});const { cardRef: cardRef3 } = useLightCard({ light: { color: 'yellow', },});</script><style scoped lang="less">.container { background: black; width: 100%; height: 100%; padding: 200px; display: flex; justify-content: space-between; .item { position: relative; width: 125px; height: 125px; background: #1c1c1f; border: 1px solid rgba(255, 255, 255, 0.1); }}</style>// use-light-card.tsimport { onMounted, onUnmounted, ref } from 'vue';interface IOptions { light?: { width?: number; // 宽 height?: number; // 高 color?: string; // 颜色 blur?: number; // filter: blur() };}export const useLightCard = (option: IOptions = {}) => { // 获取卡片的dom节点 const cardRef = ref<HTMLDivElement | null>(null); let cardOverflow = ''; // 光的dom节点 const lightRef = ref<HTMLDivElement>(document.createElement('div')); // 设置光源的样式 const setLightStyle = () => { const { width = 60, height = 60, color = '#ff4132', blur = 40 } = option.light ?? {}; const lightDom = lightRef.value; lightDom.style.position = 'absolute'; lightDom.style.width = `${width}px`; lightDom.style.height = `${height}px`; lightDom.style.background = color; lightDom.style.filter = `blur(${blur}px)`; }; // 设置卡片的 overflow 为 hidden const setCardOverflowHidden = () => { const cardDom = cardRef.value; if (cardDom) { cardOverflow = cardDom.style.overflow; cardDom.style.overflow = 'hidden'; } }; // 还原卡片的 overflow const restoreCardOverflow = () => { const cardDom = cardRef.value; if (cardDom) { cardDom.style.overflow = cardOverflow; } }; // 往卡片添加光源 const addLight = () => { const cardDom = cardRef.value; if (cardDom) { cardDom.appendChild(lightRef.value); } }; // 删除光源 const removeLight = () => { const cardDom = cardRef.value; if (cardDom) { cardDom.removeChild(lightRef.value); } }; // 监听卡片的鼠标移入 const onMouseEnter = () => { // 添加光源 addLight(); setCardOverflowHidden(); }; // use-light-card.ts // 监听卡片的鼠标移动 const onMouseMove = (e: MouseEvent) => { // 获取鼠标的坐标 const { clientX, clientY } = e; // 让光跟随鼠标 const cardDom = cardRef.value; const lightDom = lightRef.value; if (cardDom) { // 获取卡片相对于窗口的x和y坐标 const { x, y } = cardDom.getBoundingClientRect(); // 获取光的宽高 const { width, height } = lightDom.getBoundingClientRect(); lightDom.style.left = `${clientX - x - width / 2}px`; lightDom.style.top = `${clientY - y - height / 2}px`; // 设置动画效果 const maxXRotation = 10; // X 轴旋转角度 const maxYRotation = 10; // Y 轴旋转角度 const rangeX = 200 / 2; // X 轴旋转的范围 const rangeY = 200 / 2; // Y 轴旋转的范围 const rotateX = ((clientX - x - rangeY) / rangeY) * maxXRotation; // 根据鼠标在 Y 轴上的位置计算绕 X 轴的旋转角度 const rotateY = -1 * ((clientY - y - rangeX) / rangeX) * maxYRotation; // 根据鼠标在 X 轴上的位置计算绕 Y 轴的旋转角度 cardDom.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; //设置 3D 透视 } }; // 监听卡片鼠标移出 const onMouseLeave = () => { // 鼠标离开移出光源 removeLight(); restoreCardOverflow(); }; onMounted(() => { // 设置光源样式 setLightStyle(); // 绑定事件 cardRef.value?.addEventListener('mouseenter', onMouseEnter); cardRef.value?.addEventListener('mousemove', onMouseMove); cardRef.value?.addEventListener('mouseleave', onMouseLeave); }); onUnmounted(() => { // 解绑事件 cardRef.value?.removeEventListener('mouseenter', onMouseEnter); cardRef.value?.removeEventListener('mousemove', onMouseMove); cardRef.value?.removeEventListener('mouseleave', onMouseLeave); }); return { cardRef, };};
本文链接：http://www.28at.com/showinfo-26-90040-0.htmlVue3 实现最近很火的酷炫功能：卡片悬浮发光
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号