CSS3精美小图标菜单导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3精美小图标菜单导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3精美小图标菜单导航</title>
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
    <div class="container">
        <ul class="navigation">
            <li>
                <a href="#" class="to top">
                    <i class="fa fa-home"></i>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="#" class="to bottom">
                    <i class="fa fa-qrcode"></i>
                    <span>About</span>
                </a>
            </li>
            <li>
                <a href="#" class="to right">
                    <i class="fa fa-flash"></i>
                    <span>Work</span>
                </a>
            </li>
            <li>
                <a href="#" class="to left">
                    <i class="fa fa-pencil"></i>
                    <span>Journal</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-heart"></i>
                    <span>Contact</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

CSS代码(style.css):

*{margin:0;padding:0;}
body{font:16px/1.5em Tahoma,sans-serif;background-color:#48d1cc;}
.container{max-width:35.83333333em;margin:10% auto;border-radius:0.5em;background-color:#5cd6d2;}
a{text-decoration:none;color:#ffffff;}
/* Utility classes */
.reset-position{top:0;left:0;}
.align-v{top:50%;-webkit-transform:translateY(-50%);}
.align-h{left:50%;-webkit-transform:translateX(-50%);}
.align-vh{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);}
/* Main style */
.navigation:after{content:'';display:block;clear:both;}
.navigation li{list-style:none;float:left;display:inline-block;margin:1em;}
.navigation li a{display:block;width:5em;height:5em;border-radius:0.33333333em;line-height:5em;position:relative;text-align:center;background-color:#2eb8b3;border:0.08333333em solid #2baca7;overflow:hidden;z-index:1;}
.navigation li a i{display:block;position:absolute;font-size:1.66666667em;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-webkit-transition:all 0.5s ease;}
.navigation li a span{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);opacity:0;font-size:1em;text-transform:uppercase;-webkit-transition:all 0.25s 0.125s ease;}
.navigation li a:hover.to.bottom i{-webkit-transform:translate(-50%,5em);}
.navigation li a:hover.to.top i{-webkit-transform:translate(-50%,-5em);}
.navigation li a:hover.to.left i{-webkit-transform:translate(-5em,-50%);}
.navigation li a:hover.to.right i{-webkit-transform:translate(5em,-50%);}
.navigation li a:hover i{-webkit-transform:translate(-50%,5em);color:rgba(255,255,255,0.4);}
.navigation li a:hover span{opacity:1;}

附件:下载该文件资源,减少时间成本(增值服务)