Question

我试图建立一个链接＆＃39;反弹＆＃39;在悬停。我已将它放在图像上并且它有效，但是当我将相同类型的效果应用于链接时它不起作用。

CSS

.intro-websites:hover{
transform: translateY(-10px);
}
.intro-connect:hover{
transform: translateY(-10px);
}
.intro-ppc:hover{
transform: translateY(-10px);
}
.intro-display:hover{
transform: translateY(-10px);
}

HTML

<p>
<a class="intro-websites" style="text-decoration: none;" href="#">Websites</a>
<span style="color:#fedb00">&bull;</span>
<a class="intro-connect" style="text-decoration: none;" href="#">Connect</a> 
<span style="color:#fedb00">&bull;</span> 
<a class="intro-ppc" style="text-decoration: none;" href="#">Pay-Per-Click</a>
<span style="color:#fedb00">&bull;</span>
<a class="intro-display" style="text-decoration: none;" href="#">Display</a>
</p>

任何人都可以帮助或指出我哪里出错了吗？感谢

Answer 1

为了获得悬停的弹跳效果，以下代码将有所帮助：

.intro-websites:hover {
   animation: bounce 2.5s infinite; //other browsers
   -webkit-animation: bounce 2.5s infinite; //webkit browsers
   -moz-animation: bounce 2.5s infinite; //firefox
   -o-animation: bounce 2.5s infinite; //opera
}

现在需要使用CSS3动画和关键帧设置反弹动画：

//CSS3 Bounce Animation
@-webkit-keyframes bounce {
    0%,  
    100% {
       -webkit-transform: translateY(0);
    } 
    50% {
        -webkit-transform: translateY(-10px);
    }
}
@-moz-keyframes bounce {
    0%, 
    100% {
       -moz-transform: translateY(0);
    }
    50% {
       -moz-transform: translateY(-10px);
    }
}
@-o-keyframes bounce {
    0%,
    100% {
       -o-transform: translateY(0);
    }
    50% {
       -o-transform: translateY(-10px);
    }
}
@keyframes bounce {
    0%,  
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

我已经为webkit浏览器，firefox，opera等添加了关键帧动画。如果您不需要它们，只需删除悬停样式中的供应商前缀并使用您想要的那些。

Answer 2

将display: inline-block;添加到您的a代码中。

a {
  display: inline-block;
  text-decoration: none;
}

.bounce:hover {
  transform: translateY(-10px);
}

<p>
  <a class="intro-websites bounce" href="#">Websites</a>
  <span style="color:#fedb00">&bull;</span>
  <a class="intro-connect bounce" href="#">Connect</a> 
  <span style="color:#fedb00">&bull;</span> 
  <a class="intro-ppc bounce" href="#">Pay-Per-Click</a>
  <span style="color:#fedb00">&bull;</span>
  <a class="intro-display bounce" href="#">Display</a>
</p>

Answer 3

这应该可以帮助您入门。如果您需要动画而不是一次性过渡，请使用Neelam的解决方案。

＆＃13;

a[class*="intro-"] {
  display: inline-block;
  transition: transform 0.2s ease;
}
a[class*="intro-"]:hover {
  transform: translateY(-10px);
}

＆＃13;

<p>
  <a class="intro-websites" style="text-decoration: none;" href="#">Websites</a>
  <span style="color:#fedb00">&bull;</span>
  <a class="intro-connect" style="text-decoration: none;" href="#">Connect</a> 
  <span style="color:#fedb00">&bull;</span> 
  <a class="intro-ppc" style="text-decoration: none;" href="#">Pay-Per-Click</a>
  <span style="color:#fedb00">&bull;</span>
  <a class="intro-display" style="text-decoration: none;" href="#">Display</a>
</p>

＆＃13;

Answer 4

我建议在这种情况下使用padding-bottom而不是动画y坐标，而不仅仅具有与上面相同的效果，你也可以防止有时正在发生跳跃的链接当你在盘旋时。

您可以使用以下代码

来实现此目的

<强> HTML

<nav>
  <a href="">Websites</a>
  <a href="">Connect</a>
  <a href="">Pay-Per-Click</a>
  <a href="">Display</a>
</nav>

<强> CSS

nav {
  width: 100%;
  height: 100px;
  background: #eee;
  text-align: center;
}

a {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s;
  display: inline-block;
  margin: 0 20px;
  text-decoration: none;
  color: #000;
}

a:hover {
  padding-bottom: 20px;
}

nav {
  width: 100%;
  height: 100px;
  background: #eee;
  text-align: center;
}
a {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s;
  display: inline-block;
  margin: 0 20px;
  text-decoration: none;
  color: #000;
}
a:hover {
  padding-bottom: 20px;
}

<nav>
  <a href="">Websites</a>
  <a href="">Connect</a>
  <a href="">Pay-Per-Click</a>
  <a href="">Display</a>
</nav>

试图在悬停时使链接反弹

4 个答案: