Question

我第一次建立一个简单的网站，我决定动画我的链接。我使用了我在互联网上找到的github中的代码（http://ianlunn.github.io/Hover/）并应用于4个链接。问题是他们中的两个得到了一个px的奇怪底边。最重要的是，＆＃39; margin＆＃39;和＆＃39;填充＆＃39;只有30％的时间似乎工作，所以我不能用它来解决这个问题。

我的链接的html代码：

  <span class="sidebar">
<ul class="nav">
  <li><a class="home" href="#">Home</a></li>
  <li><a class="empresa" href="#">A empresa</a></li>
  <li><a class="servicos" href="#">Serviços</a></li>
  <li><a class="contato" href="#">Contato</a></li>
</ul>
<aside>
  <p>lol</p>
  <p>test</p>
</aside>
</span>

按钮动画代码：

.home {
   background-color: silver;
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   -webkit-transition-property: color;
   transition-property: color;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
}

 .home:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a0f3a;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 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;
}

 .home:hover, .home:focus, .home:active {
    color: white;
}
 .home:hover:before, .home:focus:before, .home:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

错误的链接是＆＃34; empresa＆＃34;和＆＃34; contato＆＃34;，如下面的屏幕截图所示。

http://imgur.com/FPjKB3s

边距和填充不起作用css

0 个答案: