CSS3模拟书签导航,此特效提供5种展示方式。演示 案例或 下载 此教程:
HTML代码:
<section class="main">
<div id="sb-container" class="sb-container">
<div> <span class="sb-icon icon-cog"></span>
<h4><span>All Settings</span></h4>
</div>
<div> <span class="sb-icon icon-flight"></span>
<h4><span>User Modes</span></h4>
</div>
<div> <span class="sb-icon icon-eye"></span>
<h4><span>Browse All</span></h4>
</div>
<div> <span class="sb-icon icon-install"></span>
<h4><span>Install App</span></h4>
</div>
<div> <span class="sb-icon icon-bag"></span>
<h4><span>Productivity</span></h4>
</div>
<div> <span class="sb-icon icon-globe"></span>
<h4><span>All Options</span></h4>
</div>
<div> <span class="sb-icon icon-picture"></span>
<h4><span>User Images</span></h4>
</div>
<div> <span class="sb-icon icon-video"></span>
<h4><span>User Videos</span></h4>
</div>
<div> <span class="sb-icon icon-download"></span>
<h4><span>Download App</span></h4>
</div>
<div> <span class="sb-icon icon-mobile"></span>
<h4><span>Mobile Theme</span></h4>
</div>
<div> <span class="sb-icon icon-camera"></span>
<h4><span>Digital App</span></h4>
</div>
<div>
<h4><span>Profile</span></h4>
<h5><span>We ♥ color</span></h5>
</div>
</div>
<!-- sb-container -->
</section>