[分享]css3鼠标移上去弹跳

CSS3中有许多特殊的效果，其中一个很有趣的效果就是鼠标移上去弹跳的效果。

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #000;
  border-radius: 50%;
  transition: all 0.5s ease;
}

.box:hover {
  transform: translate(0, -50px);
  animation: bounce 0.5s linear;
}

@keyframes bounce {
  0% {
    transform: translate(0, -50px);
  }
  50% {
    transform: translate(0, -75px);
  }
  100% {
    transform: translate(0, -50px);
  }
} 

在这个例子中，我们创建了一个圆形的div，并给它加上了黑色背景和圆形的边框。当鼠标移动到这个div上面时，我们会让它向上移动50px，并且添加一个动画效果模拟弹跳的感觉。

我们使用了transition属性来实现鼠标移上去平滑过渡的效果，在:hover伪类中添加了一个translate属性，使div向上移动50px。

为了实现弹跳的动画效果，我们使用了CSS3的@keyframes关键字来建立一个动画，分别设置了起始、中间和结束位置。我们在:hover伪类中使用了animation属性，将bounce动画应用到这个div上。

通过这样的方式，我们可以轻松地实现一个鼠标移上去弹跳的效果，增加网页的互动性和趣味性。