css 卡片切换效果
时间: 2023-07-30 10:12:35 浏览: 115
你可以使用CSS来实现卡片切换效果。下面是一个简单的示例代码:
HTML:
```html
<div class="card-container">
<div class="card active">
<h3>Card 1</h3>
<p>This is the content of card 1.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the content of card 2.</p>
</div>
<div class="card">
<h3>Card 3</h3>
<p>This is the content of card 3.</p>
</div>
</div>
```
CSS:
```css
.card-container {
display: flex;
}
.card {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
transition: transform 0.3s ease;
}
.card.active {
transform: scale(1.1);
}
```
在上面的示例中,`.card-container` 是一个包含所有卡片的容器。每个卡片都有一个 `.card` 类,并且默认情况下都具有相同的样式。通过将 `.active` 类添加到某个卡片上,可以实现该卡片的放大效果。
你可以使用JavaScript或其他方式来切换 `.active` 类的位置,从而切换卡片的显示效果。这只是一个简单的示例,你可以根据自己的需求进行扩展和调整。