Tab选项卡
纯CSS3经典Tab选项卡动画特效
PetitQ
这是一款使用纯 css3 制作的经典 tab 选项卡动画特效插件。该 tab 选项卡特效共 4 种效果：淡入淡出效果、左右滑动效果、渐隐效果和上下滑动效果。在这款插件中使用纯 css3 制作了 4 种经典的 tab 选项卡动画特效。该 tab 选项卡使用 radio 按钮来做选项卡的切换按钮，并使用:checked 伪类和兄弟选择器来完成动画效果。
HTML 结构
html 结构使用 radio 来连接作为 tabs 的 div，class 为 content 的 div 包含了所有的 tabs 页：
也想出现在这里？联系我们吧
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked">
<label for="tab-1" class="tab-label-1">About us</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2">
<label for="tab-2" class="tab-label-2">How we work</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3">
<label for="tab-3" class="tab-label-3">References</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4">
<label for="tab-4" class="tab-label-4">Contact us</label>
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<p>Some content</p>
</div>
<div class="content-2">
<p>Some content</p>
</div>
<div class="content-3">
<p>Some content</p>
</div>
<div class="content-4">
<p>Some content</p>
</div>
</div>
</section>
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
