前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >CSS 实现卡片以及鼠标移入特效

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

作者头像
訾博ZiBo
发布2025-01-06 20:30:45
发布2025-01-06 20:30:45
930
举报
文章被收录于专栏:全栈开发工程师

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

0、效果预览

默认
image-20240118214343005
image-20240118214343005
鼠标移入后
image-20240118214404591
image-20240118214404591

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

1、创建卡片组件

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

代码语言:javascript
复制
<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 语法为卡片组件添加样式,包括卡片布局、边框、阴影等。

代码语言:javascript
复制
<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、完整代码

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS 实现卡片以及鼠标移入特效
    • 0、效果预览
      • 默认
      • 鼠标移入后
    • 1、创建卡片组件
      • 2、添加样式
        • 3、完整代码
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档