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

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

文章目录

• CSS 实现卡片以及鼠标移入特效
• • 0、效果预览
  • 1、创建卡片组件
  • 2、添加样式
  • 3、完整代码

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 语法为卡片组件添加样式，包括卡片布局、边框、阴影等。

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

3、完整代码