css3透明滑动菜单特效代码

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

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

以下是 css3透明滑动菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>

<html>
<head>
    <title>css3透明滑动菜单</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/zzsc.css" />
</head>

<body>
    <ul>
        <li>
            <a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
        </li>
        <li>
            <a class="entypo-star" href="#"></a> <span>Favorite</span>
        </li>

        <li>
            <a class="entypo-newspaper" href="#"></a> <span>About us</span>
        </li>
        <li>
            <a class="entypo-location" href="#"></a> <span>Find us</span>
        </li>
        <li>
            <a class="entypo-link" href="#"></a> <span>Share</span>
        </li>

        <li>
            <a class="entypo-help-circled" href="#"></a> <span>FAQ's</span>
        </li>
    </ul>
</body>
</html>

CSS代码(zzsc.css):

@import url(http://weloveiconfonts.com/api/?family=entypo);/* entypo */
[class*="entypo-"]:before{font-family:'entypo',sans-serif;}
@-webkit-keyframes flip{0%{-webkit-transform:rotateY(0deg);opacity:1;}
100%{-webkit-transform:rotateY(95deg);opacity:0;}
}
@-moz-keyframes flip{0%{-webkit-transform:rotateY(0deg);opacity:1;}
100%{-webkit-transform:rotateY(95deg);opacity:0;}
}
@-o-keyframes flip{0%{-webkit-transform:rotateY(0deg);opacity:1;}
100%{-webkit-transform:rotateY(95deg);opacity:0;}
}
@keyframes flip{0%{-webkit-transform:rotateY(0deg);opacity:1;}
100%{-webkit-transform:rotateY(95deg);opacity:0;}
}
body{background:url(forestblur.jpg) no-repeat;background-size:cover 100%;}
h2{color:#555;text-align:center;}
ul{position:absolute;left:0;right:0;margin:50px auto;padding:0;width:200px;height:220px;list-style:none;-webkit-perspective:1000;-moz-perspective:1000;-o-perspective:1000;perspective:1000;}
li{margin:2px 0;padding:0;}
li a{display:block;height:18px;width:20px;background:rgba(155,155,155,0.5);color:#fff;padding:8px 6px;text-decoration:none;text-align:center;}
.menu{opacity:1;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;}
li span{width:154px;float:left;text-align:center;background:rgba(155,155,155,0.5);color:#fff;margin:-34px 34px;padding:8px 6px;transform-origin:0%;opacity:0;-webkit-transform:rotateY(95deg);-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;-webkit-animation:flip 2s;-moz-animation:flip 2s;-o-animation:flip 2s;animation:flip 2s;}
span[class='menu']{-webkit-animation:none;}
li:nth-child(2) span{-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-o-animation-delay:.5s;animation-delay:.5s;}
li:nth-child(3) span{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s;}
li:nth-child(4) span{-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-o-animation-delay:.3s;animation-delay:.3s;}
li:nth-child(5) span{-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s;}
li:nth-child(6) span{-webkit-animation-delay:.1s;-moz-animation-delay:.1s;-o-animation-delay:.1s;animation-delay:.1s;}
li a:hover ~ span{opacity:1;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;}

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