网易逆水寒活动导航

CSS3 animation属性中的steps功能符深入介绍

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>网易逆水寒导航</title> <style type="text/css"> body{margin: 0;padding: 300px 0 0;background: #333;height: 100vh} #nav_g { width: 100%; /*position: absolute;*/ /*bottom: 0;*/ /*left: 0;*/ /*background: url(https://n.res.netease.com/pc/zt/20180516104610//img/video/nav-bg_e532939.png) no-repeat center top;*/ height: 308px; z-index: 2; } #nav_g #waves { position: relative; top: -9px; } #nav_g .navs { width: 1370px; position: absolute; left: 50%; margin-left: -700px; top: 106px; } #nav_g .navs:before { content: ''; background: #d2b369; width: 300px; height: 1px; position: absolute; left: -300px; top: 39px; z-index: 1; } #nav_g .navs:after { content: ''; background: url(http://img.gzui.net/imgs/icon_3ae88fb.png) no-repeat; width: 15px; height: 15px; position: absolute; right: -13px; top: 32px; z-index: 1; } #nav_g .navs a { display: block; float: left; width: 114px; height: 32px; font-size: 0; position: relative; z-index: 2; } #nav_g .navs a span { display: block; width: 100%; height: 100%; background-image: url(http://img.gzui.net/imgs/nav_0df9ef0.png); transition: transform .5s linear; } #nav_g .navs a:hover span,#nav_g .navs a.active span { transform: translateY(-10px); background-image: url(http://img.gzui.net/imgs/nav2_42bbec6.png); } #nav_g .navs a:hover:after,#nav_g .navs a.active:after { content: ''; background: url(http://img.gzui.net/imgs/nav_gif_bf7383f.png) no-repeat; -webkit-animation: indexbtn .5s steps(18) both 300ms 0 ease; -moz-animation: indexbtn .5s steps(18) both 300ms 0 ease; -ms-animation: indexbtn .5s steps(18) both 300ms 0 ease; animation: indexbtn .5s steps(18) both 300ms 0 ease; -moz-animation: indexbtn .5s steps(18) both; -webkit-animation: indexbtn .5s steps(18) both; -o-animation: indexbtn .5s steps(18) both; -ms-animation: indexbtn .5s steps(18) both; animation: indexbtn .5s steps(18) both; width: 114px; height: 43px; position: absolute; bottom: -20px; left: 0; } #nav_g .navs a:after { content: ''; width: 114px; height: 43px; position: absolute; bottom: -20px; left: 0; background: url(http://img.gzui.net/imgs/nav_gif_bf7383f.png) no-repeat; -webkit-animation: indexbtn2 .5s steps(18) both 300ms 0 ease; -moz-animation: indexbtn2 .5s steps(18) both 300ms 0 ease; -ms-animation: indexbtn2 .5s steps(18) both 300ms 0 ease; animation: indexbtn2 .5s steps(18) both 300ms 0 ease; -moz-animation: indexbtn2 .5s steps(18) both; -webkit-animation: indexbtn2 .5s steps(18) both; -o-animation: indexbtn2 .5s steps(18) both; -ms-animation: indexbtn2 .5s steps(18) both; animation: indexbtn2 .5s steps(18) both; } #nav_g .navs .nav1 span { background-position: 0 0; } #nav_g .navs .nav1:hover span,#nav_g .navs .nav1.active span { background-position: 0 0; } #nav_g .navs .nav2 span { background-position: -117px 0; } #nav_g .navs .nav2:hover span,#nav_g .navs .nav2.active span { background-position: -117px 0; } #nav_g .navs .nav3 span { background-position: -228px 0; } #nav_g .navs .nav3:hover span,#nav_g .navs .nav3.active span { background-position: -228px 0; } #nav_g .navs .nav4 span { background-position: -342px 0; } #nav_g .navs .nav4:hover span,#nav_g .navs .nav4.active span { background-position: -342px 0; } #nav_g .navs .nav5 span { background-position: -450px 0; } #nav_g .navs .nav5:hover span,#nav_g .navs .nav5.active span { background-position: -450px 0; } #nav_g .navs .nav6 span { background-position: -573px 0; } #nav_g .navs .nav6:hover span,#nav_g .navs .nav6.active span { background-position: -573px 0; } #nav_g .navs .nav7 span { background-position: -684px 0; } #nav_g .navs .nav7:hover span,#nav_g .navs .nav7.active span { background-position: -684px 0; } #nav_g .navs .nav8 span { background-position: -798px 0; } #nav_g .navs .nav8:hover span,#nav_g .navs .nav8.active span { background-position: -798px 0; } #nav_g .navs .nav9 span { background-position: -912px 0; } #nav_g .navs .nav9:hover span,#nav_g .navs .nav9.active span { background-position: -912px 0; } #nav_g .navs .nav10 span { background-position: -1026px 0; } #nav_g .navs .nav10:hover span,#nav_g .navs .nav10.active span { background-position: -1026px 0; } #nav_g .navs .nav11 span { background-position: -1140px 0; } #nav_g .navs .nav11:hover span,#nav_g .navs .nav11.active span { background-position: -1140px 0; } #nav_g .navs .nav12 span { background-position: right 0; } #nav_g .navs .nav12:hover span,#nav_g .navs .nav12.active span { background-position: right 0; } @-webkit-keyframes indexbtn { 0% { background-position: 0 0; } 100% { background-position: 0 bottom; } } @-moz-keyframes indexbtn { 0% { background-position: 0 0; } 100% { background-position: 0 bottom; } } @-o-keyframes indexbtn { 0% { background-position: 0 0; } 100% { background-position: 0 bottom; } } @-ms-keyframes indexbtn { 0% { background-position: 0 0; } 100% { background-position: 0 bottom; } } @keyframes indexbtn { 0% { background-position: 0 0; } 100% { background-position: 0 bottom; } } @-webkit-keyframes indexbtn2 { 0% { background-position: 0 bottom; } 100% { background-position: 0 0; } } @-moz-keyframes indexbtn2 { 0% { background-position: 0 bottom; } 100% { background-position: 0 0; } } @-o-keyframes indexbtn2 { 0% { background-position: 0 bottom; } 100% { background-position: 0 0; } } @-ms-keyframes indexbtn2 { 0% { background-position: 0 bottom; } 100% { background-position: 0 0; } } @keyframes indexbtn2 { 0% { background-position: 0 bottom; } 100% { background-position: 0 0; } } </style> </head> <body> <div id="nav_g" class="hide" style="display: block;"> <div class="navs"> <a href="javascript:void(0);" class="nav1" data-page="index" stat="nav1" statname="导航"><span>首页</span></a> <a href="javascript:void(0);" class="nav2 active" data-page="job" stat="nav2" statname="导航" datalogo="white"><span>职业站</span></a> <a href="javascript:void(0);" class="nav3" data-page="news" stat="nav3" statname="导航" datalogo="black"><span> 新闻资讯</span></a> <a href="javascript:void(0);" class="nav4" data-page="video" stat="nav4" statname="导航" datalogo="white"><span></span>游戏视频 </a> <a href="javascript:void(0);" class="nav5" data-page="bz" stat="nav5" statname="导航" datalogo="white"><span> 截图壁纸</span></a> <a href="//n.163.com/renwu/" target="_blank" class="nav6 disabled" stat="nav6" statname="导航"><span>人物介绍 </span></a> <a href="//n.163.com/WUZ2WWgxY/index.html" target="_blank" class="nav7 disabled" stat="nav7" statname="导航"><span>报春福利</span></a> <a href="javascript:void(0);" class="nav8" data-page="codes" stat="nav8" statname="导航" datalogo="white"><span></span>官博官微 </a> <a href="http://n.netease.com/forum.php" target="_blank" class="nav9 disabled" stat="nav9" statname="导航"><span>论坛</span></a> <a href="javascript:void(0);" class="nav10 disabled"><span>6 .15解锁</span></a> <a href="javascript:void(0);" class="nav11 disabled"><span>6 .22解锁</span></a> <a href="javascript:void(0);" class="nav12 disabled"><span>6 .29解锁</span></a> </div> </div> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 网易逆水寒活动导航