css3气球跟随鼠标飘动

CSS3是前端开发中的一个重要的技术，其可以实现各种动态效果，其中最受欢迎的就是气球跟随鼠标飘动的效果了。下面我们来看看CSS3实现气球跟随鼠标飘动的方法。

.balloon:hover {
      animation: float 3s ease-out infinite;
}
@keyframes float {
  0% {
     transform: translateY(0);
 }
  50% {
     transform: translateY(-20px);
 }
  100% {
     transform: translateY(0);
 }
}
    

以上代码定义了一个类名为“balloon”的元素，在鼠标滑过时触发动画“float”，该动画运行3秒钟，使用缓出函数，重复播放无限次。

接下来我们定义“float”动画。在动画中，通过transform函数改变元素的垂直位置，使其在50%的时候向上移动20像素，达到气球上升的效果。最后回到原位置。通过这种方式，气球就可以跟随鼠标飘动了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！