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