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; }
欢迎访问每天进步网:https://meitianjinbu.cn/