水果Tab选项卡切换特效

原创已于 2025-06-27 13:44:19 修改 · 612 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-02 14:48:00 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水果Tab选项卡切换特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #f5f5f5;
padding: 40px 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.container {
width: 90%;
max-width: 800px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.tabs {
display: flex;
background: linear-gradient(to right, #ff9966, #ff5e62);
}

.tab {
padding: 15px 25px;
cursor: pointer;
color: white;
font-weight: bold;
text-align: center;
flex: 1;
position: relative;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.tab:hover {
background: rgba(255, 255, 255, 0.2);
}

.tab.active {
background: rgba(255, 255, 255, 0.3);
}

.tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}

.tab-content {
padding: 30px;
display: none;
animation: fadeIn 0.5s ease;
}

.tab-content.active {
display: block;
}

.fruit-content {
display: flex;
align-items: center;
gap: 30px;
}

.fruit-image {
flex: 1;
text-align: center;
}

.fruit-image img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.fruit-image img:hover {
transform: scale(1.05);
}

.fruit-info {
flex: 1;
}

.fruit-info h2 {
color: #ff5e62;
margin-bottom: 15px;
font-size: 28px;
}

.fruit-info p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}

.fruit-info ul {
list-style-type: none;
margin-bottom: 20px;
}

.fruit-info ul li {
padding: 5px 0;
color: #555;
position: relative;
padding-left: 20px;
}

.fruit-info ul li::before {
content: '✓';
color: #ff9966;
position: absolute;
left: 0;
font-weight: bold;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.footer {
text-align: center;
margin-top: 20px;
color: #888;
font-size: 12px;
}

.footer a {
color: #ff5e62;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="tabs">
<div class="tab active" data-tab="apple">苹果</div>
<div class="tab" data-tab="orange">橙子</div>
<div class="tab" data-tab="banana">香蕉</div>
<div class="tab" data-tab="grape">葡萄</div>
</div>

<div class="tab-content active" id="apple">
<div class="fruit-content">
<div class="fruit-image">
<img src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="苹果">
</div>
<div class="fruit-info">
<h2>苹果</h2>
<p>苹果是一种营养丰富的水果，含有丰富的维生素C和膳食纤维。每天一个苹果，医生远离我。</p>
<ul>
<li>富含抗氧化剂</li>
<li>有助于降低胆固醇</li>
<li>促进消化健康</li>
<li>低热量，适合减肥</li>
</ul>
<p>苹果品种繁多，从酸甜的富士到香甜的红星，总有一款适合您的口味。</p>
</div>
</div>
</div>

<div class="tab-content" id="orange">
<div class="fruit-content">
<div class="fruit-image">
<img src="https://images.unsplash.com/photo-1557800636-894a64c1696f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="橙子">
</div>
<div class="fruit-info">
<h2>橙子</h2>
<p>橙子是维生素C的极佳来源，一个中等大小的橙子就能提供一天所需的维生素C。</p>
<ul>
<li>增强免疫系统</li>
<li>促进胶原蛋白生成</li>
<li>有助于铁的吸收</li>
<li>含有丰富的抗氧化剂</li>
</ul>
<p>橙子不仅可以直接食用，还可以榨汁或用于烹饪，为菜肴增添清新的风味。</p>
</div>
</div>
</div>

<div class="tab-content" id="banana">
<div class="fruit-content">
<div class="fruit-image">
<img src="https://images.unsplash.com/photo-1528825871115-3581a5387919?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="香蕉">
</div>
<div class="fruit-info">
<h2>香蕉</h2>
<p>香蕉是一种方便携带的能量来源，富含钾元素，有助于维持正常血压和心脏功能。</p>
<ul>
<li>快速提供能量</li>
<li>有助于肌肉恢复</li>
<li>改善消化系统健康</li>
<li>含有天然糖分</li>
</ul>
<p>香蕉成熟度不同，营养价值和口感也会有所变化，可根据个人喜好选择。</p>
</div>
</div>
</div>

<div class="tab-content" id="grape">
<div class="fruit-content">
<div class="fruit-image">
<img src="https://images.unsplash.com/photo-1517581176229-0f415886e0e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="葡萄">
</div>
<div class="fruit-info">
<h2>葡萄</h2>
<p>葡萄不仅美味，还含有多种有益健康的化合物，如白藜芦醇，具有抗氧化和抗炎作用。</p>
<ul>
<li>支持心脏健康</li>
<li>有助于降低血压</li>
<li>含有丰富的多酚类物质</li>
<li>有助于血糖控制</li>
</ul>
<p>葡萄有红、绿、紫等多种颜色，每种颜色的葡萄都有其独特的营养成分。</p>
</div>
</div>
</div>

<div class="footer">

</div>
</div>