CSS 实现卡片以及鼠标移入特效

0、效果预览

默认

鼠标移入后

在本篇博客中，我们将探讨如何使用 CSS 来实现卡片组件，并添加鼠标移入特效，使你的界面更具吸引力。

1、创建卡片组件

首先，我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里，我们使用了Element Plus的滚动条组件（el-scrollbar）来包裹我们的卡片。

<template><el-scrollbar><div class="main-container"><!-- 循环生成卡片 --><div v-for="(item, index) in 10" :key="index" class="my-card"><div class="top">智能抠图工具</div><div class="middle"><img src="https://se1.360simg.com/sdm/472_321_/t012b6da5bd9bfd8a69.png" alt="卡片图片"></div><div class="foot">免费 在线使用</div></div></div></el-scrollbar>
</template>

2、添加样式

使用 SCSS 语法为卡片组件添加样式，包括卡片布局、边框、阴影等。

<style lang="scss" scoped>
.main-container {display: flex;flex-wrap: wrap;justify-content: center;.my-card {// 卡片样式display: flex;flex-direction: column;justify-content: space-between;width: 300px;height: auto;padding: 16px;margin: 10px;user-select: none;background-color: #fff;border-radius: 10px;transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;// 鼠标悬停效果&:hover {border-color: transparent;box-shadow:0 1px 2px -2px rgb(0 0 0 / 16%),0 3px 6px 0 rgb(0 0 0 / 12%),0 5px 12px 4px rgb(0 0 0 / 9%);}.top {margin-bottom: 12px;font-size: 24px;}.middle {margin-bottom: 12px;img {width: 265px;height: 180px;border-radius: 10px;}}}
}
</style>

通过以上步骤，你已经成功创建了一个简单的Vue卡片组件，并为其添加了鼠标移入特效。这使得用户在浏览你的页面时能够获得更好的交互体验。

3、完整代码

<script setup lang="ts">
defineOptions({name: 'NavigationItIndex',
})
</script><template><el-scrollbar><div class="main-container"><div v-for="(item, index) in 10" :key="index" class="my-card"><div class="top">智能抠图工具</div><div class="middle"><img src="https://se1.360simg.com/sdm/472_321_/t012b6da5bd9bfd8a69.png"></div><div class="foot">免费 在线使用</div></div></div></el-scrollbar>
</template><style lang="scss" scoped>
// 样式
.main-container {display: flex;flex-wrap: wrap;justify-content: center;.my-card {display: flex;flex-direction: column;justify-content: space-between;width: 300px;height: auto;padding: 16px;margin: 10px;user-select: none;background-color: #fff;border-radius: 10px;transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;&:hover {border-color: transparent;box-shadow:0 1px 2px -2px rgb(0 0 0 / 16%),0 3px 6px 0 rgb(0 0 0 / 12%),0 5px 12px 4px rgb(0 0 0 / 9%);}.top {margin-bottom: 12px;font-size: 24px;}.middle {margin-bottom: 12px;img {width: 265px;height: 180px;border-radius: 10px;}}}
}
</style>