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

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

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

3、完整代码