css3实现a:hover透明度渐变

客户要求网站导航hover渐变,so,研究了两天,下面是具体代码。

/*
2017.1.5 modify by Huxuebin QQ406535645*/
@import url("https://www.apple.com/wss/fonts?family=PingHei&weights=200,400&v=1");
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
color: #fff;
登入-color: transparent;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=100);
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
color: #fff;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=100);
登入-color: #080808;
}
.navbar-inverse .navbar-nav>li>a {
color: #fff;
opacity: .65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65);
/* font-family:"PingHei","Helvetica Neue","Helvetica","STHeitiSC-Light","Arial",sans-serif; */
transition:opacity 1s;
-moz-transition:opacity 1s; /* Firefox 4 */
-webkit-transition:opacity 1s; /* Safari and Chrome */
-o-transition:opacity 1s; /* Opera */
}

« »