尝试使链接在悬停时弹出

Question

我正在尝试让一个链接在悬停时“弹跳”。我已经把这个放在一个图片上，它起作用了，但是当我把同样的效果应用到链接上时，它就不起作用了。

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的解决方案。

​

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

<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>

​