一款纯CSS 3D翻转的导航菜单,鼠标悬停在导航菜单上面时,菜单有一个3D向上翻转显示翻转后的菜单文字的效果,鼠标离开时自动向下翻转显示原有内容,每一个菜单的样式都可以自由调整。
页面的head部分,仅需引入页面的CSS样式文件即可,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,div容器里放入多个a标签作为导航菜单,代码如下:
<div class="container">
<a href="http://www.sucaihuo.com" class="social-container twitter">
<div class="social-cube">
<div class="front">
sucaihuo
</div>
<div class="bottom">
@Richer
</div>
</div>
</a>
<a href="#" class="social-container facebook">
<div class="social-cube">
<div class="front">
weixin
</div>
<div class="bottom">
Username
</div>
</div>
</a>
<a href="#" class="social-container youtube">
<div class="social-cube">
<div class="front">
weibo
</div>
<div class="bottom">
Username
</div>
</div>
</a>
<a href="#" class="social-container github">
<div class="social-cube">
<div class="front">
QQ
</div>
<div class="bottom">
Username
</div>
</div>
</a>
<a href="#" class="social-container dribbble">
<div class="social-cube">
<div class="front">
email
</div>
<div class="bottom">
Username
</div>
</div>
</a>
<a href="#" class="social-container codepen">
<div class="social-cube">
<div class="front">
renren
</div>
<div class="bottom">
Username
</div>
</div>
</a>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791