实现炫酷的高亮卡片悬停动画，只需几行JS和CSS
2023-04-26 22:42:33
打造炫酷的高亮卡片悬停动画效果
简介
卡片设计在现代网络设计中无处不在。从产品展示到博客文章，卡片为内容提供了简洁而引人注目的呈现方式。为了让你的卡片脱颖而出，你可以添加一些微妙的动画效果，比如悬停时的高亮效果。在本教程中，我们将引导你一步步创建一种炫酷的高亮卡片悬停动画效果，让你的网站瞬间提升一个档次。
准备工作
1. HTML 文件
创建一个 HTML 文件，并将其命名为 index.html。在文件中粘贴以下代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<h1>卡片标题</h1>
<p>卡片内容</p>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS 文件
创建一个 CSS 文件，并将其命名为 style.css。在文件中粘贴以下代码：
.card {
width: 250px;
height: 250px;
background-color: #fff;
border: 1px solid #000;
margin: 50px;
padding: 20px;
}
.card:hover {
border-color: #f00;
background: linear-gradient(to right, #000 0%, #f00 100%);
}
3. JavaScript 文件
创建一个 JavaScript 文件，并将其命名为 script.js。在文件中粘贴以下代码：
const cards = document.querySelectorAll('.card');
cards.forEach((card) => {
card.addEventListener('mousemove', (event) => {
const x = event.clientX - card.offsetLeft;
const y = event.clientY - card.offsetTop;
const width = card.offsetWidth;
const height = card.offsetHeight;
const gradient = `linear-gradient(to right, #000 0%, #f00 ${x / width * 100}%, #000 ${y / height * 100}%)`;
card.style.background = gradient;
});
});
效果展示
保存所有文件并运行 index.html 文件。你会看到一张简单的卡片，当鼠标悬停在其上时，它的边框会变为红色，背景色会从黑色渐变到红色。
深入理解
CSS 代码：
.card类定义了卡片的外观，包括其大小、背景色和边框。:hover伪类在鼠标悬停在卡片上时应用样式。它将边框颜色更改为红色，并将背景色设置为从黑色到红色的线性渐变。
JavaScript 代码：
document.querySelectorAll('.card')选择页面中所有具有card类的元素。forEach()方法遍历这些元素并为每个元素添加一个mousemove事件监听器。- 事件监听器在鼠标在卡片上移动时触发。它计算鼠标相对于卡片的位置并使用这些信息创建渐变背景。
自定义效果
你可以通过调整 CSS 和 JavaScript 代码来自定义高亮效果：
- 更改
.card类的属性（如大小、颜色）以匹配你的网站设计。 - 调整渐变颜色和方向以创造不同的效果。
- 添加额外的动画，例如卡片旋转或缩放。
结论
通过遵循本教程，你已经掌握了如何创建一种炫酷的高亮卡片悬停动画效果。这种效果将为你的网站增添趣味性和互动性。现在，你可以在你的项目中大胆使用它，让你的卡片设计脱颖而出。
常见问题解答
1. 为什么我的卡片没有高亮效果？
- 确认你是否正确链接了 CSS 和 JavaScript 文件。
- 检查
card类的样式是否正确应用。 - 确保鼠标悬停事件监听器已正确添加。
2. 如何更改渐变颜色？
在 style.css 文件中编辑 :hover 规则中的 linear-gradient() 函数。修改 #000 和 #f00 颜色代码以匹配你想要的渐变。
3. 如何添加旋转动画？
在 script.js 文件中，将以下代码添加到 mousemove 事件监听器中：
card.style.transform = `rotate(${x / width * 360}deg)`;
4. 为什么我的卡片在移动时出现闪烁？
这可能是由于 JavaScript 代码中的计算不精确导致的。尝试减少 gradient 变量中 x / width 和 y / height 的乘数。
5. 如何提高效果的流畅度？
使用 requestAnimationFrame() 函数在每一帧中更新卡片的背景。这将确保动画平滑进行。
