css制作漂浮图

使用CSS动画实现漂浮效果

通过CSS的@keyframes和animation属性可以创建漂浮动画效果。以下是一个基础实现方式：

.floating-image {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

将需要漂浮的图片添加floating-image类即可实现上下浮动效果。3s控制动画周期时间，-20px控制浮动幅度。

结合旋转增强漂浮感

在垂直浮动基础上增加旋转效果可使动画更自然：

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
  }
}

使用贝塞尔曲线调整运动节奏

通过cubic-bezier()函数自定义动画时间曲线：

.floating-image {
  animation: float 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

多元素错峰漂浮

当页面有多个漂浮元素时，可通过延迟动画实现错峰效果：

.floating-image:nth-child(1) {
  animation-delay: 0s;
}
.floating-image:nth-child(2) {
  animation-delay: 0.5s;
}

响应式漂浮设计

结合媒体查询调整不同设备上的漂浮幅度：

@media (max-width: 768px) {
  @keyframes float {
    50% {
      transform: translateY(-10px);
    }
  }
}

悬浮暂停优化体验

添加交互效果，当用户悬停时暂停动画：

.floating-image:hover {
  animation-play-state: paused;
}

这些方法可单独使用也可组合应用，通过调整关键帧百分比、变换属性和动画参数，能创造出各种不同的漂浮效果。实际应用中需注意性能优化，避免过多元素同时运行动画导致页面卡顿。