css实现导航栏鼠标移入下划线特效


.nav ul li:after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    -webkit-border-radius: 1.5px;
    -moz-border-radius: 1.5px;
    -ms-border-radius: 1.5px;
    -o-border-radius: 1.5px;
    border-radius: 1.5px;
    background: #eb0001;
    /* background: -webkit-linear-gradient(left, #ED3B47 0%, #0C2B47 100%); */
    background: -moz-linear-gradient(left, #ED3B47 0%, #0C2B47 100%);
    background: -ms-linear-gradient(left, #ED3B47 0%, #0C2B47 100%);
    background: -o-linear-gradient(left, #ED3B47 0%, #0C2B47 100%);
    /* background: linear-gradient(to right, #ED3B47 0%, #0C2B47 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ED3B47, endColorstr=#0C2B47, GradintType=0 );
    /* -webkit-box-shadow: 0px 5px 5px rgba(228,0,52,.13); */
    -moz-box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    -ms-box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    -o-box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM