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

本文介绍: 首先，我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里，我们使用了Element Plus的滚动条组件（el-scrollbar）来包裹我们的卡片。通过以上步骤，你已经成功创建了一个简单的Vue卡片组件，并为其添加了鼠标移入特效。这使得用户在浏览你的页面时能够获得更好的交互体验。在本篇博客中，我们将探讨如何使用 CSS 来实现卡片组件，并添加鼠标移入特效，使你的界面更具吸引力。语法为卡片组件添加样式，包括卡片布局、边框、阴影等。

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

<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>

原文地址:https://blog.csdn.net/qq_29689343/article/details/135685017

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_58328.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。