vue3使用element-plus页面中实现卡片上下轮播,可手动切换显示,可借助插件;css 实现鼠标移入卡片动效并悬浮显示效果
时间: 2024-04-03 19:33:05 浏览: 209
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
可以使用 element-plus 中的 `Carousel` 组件来实现卡片的上下轮播,同时可以使用 `Card` 组件来渲染卡片。以下是一个简单的示例代码:
```html
<template>
<div>
<el-carousel :interval="5000" arrow-placement="none">
<el-carousel-item v-for="(item, index) in items" :key="index">
<el-card :body-style="{ padding: '0px' }" class="card">
<div class="image-wrapper">
<img :src="item.image" class="image">
<div class="overlay"></div>
</div>
<div class="card-content">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
</el-card>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
title: 'Card 1',
description: 'This is card 1',
image: 'https://picsum.photos/id/237/200/300',
},
{
title: 'Card 2',
description: 'This is card 2',
image: 'https://picsum.photos/id/238/200/300',
},
{
title: 'Card 3',
description: 'This is card 3',
image: 'https://picsum.photos/id/239/200/300',
},
],
};
},
};
</script>
<style scoped>
.card {
width: 300px;
height: 400px;
margin: auto;
}
.image-wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.image {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.card:hover .overlay {
opacity: 1;
}
.card-content {
padding: 20px;
height: 200px;
box-sizing: border-box;
}
</style>
```
关于鼠标移入卡片动效并悬浮显示效果,可以使用 CSS 的 `:hover` 伪类来实现。在示例代码中,我们在卡片的 `div` 元素上添加了一个名为 `overlay` 的遮罩层,然后通过 CSS 来控制它的透明度实现悬浮显示效果。以下是相关的 CSS 代码:
```css
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.card:hover .overlay {
opacity: 1;
}
```
当鼠标移入卡片时,会触发 `.card:hover` 的伪类,然后通过选择器 ` .card:hover .overlay` 来控制 `overlay` 元素的透明度,从而实现悬浮显示效果。
阅读全文