如何使用Tailwind CSS创建一个带有鼠标悬停效果的焦点卡片
Welcome to this tutorial where we’ll take you on a journey to create an eye-catching spotlight card hover effect using Tailwind CSS. If you’re new to this trending effect, we recommend checking out the live demo or our Dark Next.js landing page template called Stellar.
欢迎来到本教程，我们将带您一起创建一个引人注目的聚光灯卡片悬停效果，使用Tailwind CSS。如果您对这种流行的效果还不熟悉，我们建议查看实时演示或我们的名为Stellar的Dark Next.js landing page template。
To begin, we’ll create the spotlight card using pure HTML and vanilla JavaScript. After that, we’ll take it a step further by showing you how to create a reusable component for Next.js and Vue.
首先，我们将使用纯HTML和原生JavaScript创建聚光灯卡片。然后，我们将进一步展示如何为Next.js和Vue创建可重用的组件。
Let’s get started!
让我们开始吧！
Create the spotlight effect with HTML and vanilla JavaScript
使用HTML和纯JavaScript创建聚光灯效果
As we usually do in our tutorials, we will start by creating a basic HTML document that will contain the structure of our animation. Then we will write the JavaScript code in an external JS file.
和我们通常在教程中做的一样，我们将首先创建一个基本的HTML文档，其中包含我们动画的结构。然后我们将在外部JS文件中编写JavaScript代码。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Spotlight Effect</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { fontFamily: { inter: ['Inter', 'sans-serif'], }, }, }, }; </script>
</head> <body class="relative font-inter antialiased"> <main class="relative min-h-screen flex flex-col justify-center bg-slate-900 overflow-hidden"> <div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24"> <!-- Cards container --> <div class="max-w-sm mx-auto grid gap-6 lg:grid-cols-3 items-start lg:max-w-none group"> <!-- Card 1 --> <!-- Card 2 --> ...