之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航。鼠标经过的时候以背景色以菱形渐变为长方形。效果图如下:
实现的代码。
html代码:
<div align="center" style="background-color: #ee1d27; padding: 20px;"> <div class="contener_link"> <div class="link_txt"> MENU ONE</div> </div> <div class="contener_link"> <div class="link_txt"> MENU TWO</div> </div> <div class="contener_link"> <div class="link_txt"> MENU THREE</div> </div> </div>
css3代码:
.contener_link { text-align: center; position: relative; width: 170px; height: 50px; cursor: pointer; display: inline-block; } .contener_link .link_txt { font-family:'Roboto'; position: absolute; width: 150px; font-weight: 300; text-decoration: none; font-size:22px; padding: 10px; color: #ffffff; } .contener_link:hover { background-color: #f8b334; -webkit-animation-duration:1s; -webkit-animation-name: diaganim; -moz-animation-duration:1s; -moz-animation-name: diaganim; -ms-animation-duration:1s; -ms-animation-name: diaganim; animation-duration:1s; animation-name: diaganim; } @-webkit-keyframes diaganim { 0% {-webkit-transform: skewX(-80deg);} 100% {-webkit-transform: skewX(0deg);} } @-moz-keyframes diaganim { 0% {-moz-transform: skewX(-80deg);} 100% {-moz-transform: skewX(0deg);} } @-ms-keyframes diaganim { 0% {-ms-transform: skewX(-80deg);} 100% {-ms-transform: skewX(0deg);} } @keyframes diaganim { 0% {transform: skewX(-80deg);} 100% {transform: skewX(0deg);} }
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/9607