css制作漂浮图

使用 CSS 动画实现漂浮效果

通过 @keyframes 和 animation 属性可以实现元素的上下漂浮效果。以下是一个基础示例：

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

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

将漂浮动画应用到图片元素：

<img src="your-image.jpg" class="floating-image">

添加缓动效果增强自然感

使用 cubic-bezier 自定义动画曲线，模拟更自然的漂浮运动：

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

结合旋转创造立体感

在垂直漂浮的同时加入轻微旋转：

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

多元素错落漂浮

为多个元素设置不同的动画延迟，创造层次感：

.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(-15px);
    }
  }
}

性能优化建议

使用 will-change 属性提升动画性能：

.floating-image {
  will-change: transform;
}

阴影增强立体效果

配合动画添加动态阴影变化：

@keyframes float {
  50% {
    transform: translateY(-20px);
    filter: drop-shadow(0 15px 5px rgba(0,0,0,0.2));
  }
}