如何使用CSS实现导航栏倾斜悬停背景效果且文字不倾斜

问题描述 #

我尝试为头部导航自定义hover悬停样式，当前实现的效果如下：

我想要实现的目标效果如下图所示：

我尝试使用skew属性实现倾斜效果时，文字也会跟随背景一同倾斜，无法达到预期效果。
恳请各位提供可行解决方案，非常感谢。

现有代码 #

CSS代码 #

.hvr-link { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-link:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #424141; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-link:hover, .hvr-link:focus, .hvr-link:active { color: white; } .hvr-link:hover:before, .hvr-link:focus:before, .hvr-link:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); }

HTML代码 #

<div class="col-md-7 col-sm-12"> <div class="nav-outer clearfix menu-bg"> <!--main-menu start--> <nav class="main-menu"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse clearfix"> <ul class="navigation clearfix"> <li class="hvr_link"><a class="hvr-link" href="#top">Home</a></li> <li><a class="hvr-link" href="#service">Services</a></li> <li class="dropdown"><a class="hvr-link" href="#">About</a> <ul> <li><a class="hvr-link" href="#aboutmy">About</a></li> <li><a class="hvr-link" href="#teammy">Team</a></li> </ul> </li> <li><a class="hvr-link" href="#portfoliomy">Portfolio</a></li> <li><a class="hvr-link2" href="#propertymy">Properties</a></li> <li><a class="hvr-link2" href="#contactmy">Contact</a></li> </ul> </div> <div class="clearfix"></div> </nav> <!--main-menu end--> </div> </div>

解决方案 #

你只需要将skew倾斜效果作用在作为背景的::before伪元素上即可，不需要修改a标签本身的样式，文字就不会跟随背景倾斜。可直接使用以下调整后的CSS代码：

.hvr-link { 
  display: inline-block; 
  vertical-align: middle; 
  transform: perspective(1px) translateZ(0); 
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
  position: relative; 
  transition-property: color; 
  transition-duration: 0.3s;
  /* 按需调整内边距控制背景显示范围 */
  padding: 4px 12px;
} 
.hvr-link:before { 
  content: ""; 
  position: absolute; 
  z-index: -1; 
  top: 0; 
  bottom: 0; 
  /* 按需调整左右负值让背景超出文字范围 */
  left: -6px; 
  right: -6px; 
  background: #424141; 
  transform: scaleY(0) skewX(-12deg); 
  transform-origin: 50%; 
  transition-property: transform; 
  transition-duration: 0.3s; 
  transition-timing-function: ease-out; 
} 
.hvr-link:hover, .hvr-link:focus, .hvr-link:active { 
  color: white; 
} 
.hvr-link:hover:before, .hvr-link:focus:before, .hvr-link:active:before { 
  transform: scaleY(1) skewX(-12deg); 
}

你可以根据需求调整skewX的角度值控制倾斜程度，调整left、right的数值控制背景的宽度，调整padding控制背景的上下高度。

内容的提问来源于stack exchange，提问作者Daniyal Khan II