css动画制作图片

使用 CSS 关键帧动画制作图片效果

通过 CSS @keyframes 和 animation 属性，可以为图片添加动态效果，如旋转、缩放、淡入淡出等。

定义关键帧动画

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

应用动画到图片

.image-rotate {
  animation: rotate 3s linear infinite;
}

.image-fade {
  animation: fadeIn 2s ease-in;
}

HTML 结构

<img src="example.jpg" class="image-rotate" alt="旋转图片">
<img src="example.jpg" class="image-fade" alt="淡入图片">

使用 CSS 过渡实现悬停动画

通过 transition 属性，可以在用户交互时（如悬停）触发平滑的动画效果。

定义过渡效果

.image-hover {
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.image-hover:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

HTML 结构

<img src="example.jpg" class="image-hover" alt="悬停放大图片">

结合滤镜和动画增强视觉效果

CSS 滤镜（filter）可以与动画结合，实现更丰富的动态效果，如模糊、颜色变化等。

定义滤镜动画

@keyframes blur-effect {
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0px);
  }
}

.image-blur {
  animation: blur-effect 4s infinite;
}

HTML 结构

<img src="example.jpg" class="image-blur" alt="模糊动画图片">

使用 transform 实现 3D 效果

通过 transform-style: preserve-3d 和 perspective，可以为图片添加 3D 旋转或翻转效果。

定义 3D 旋转动画

@keyframes flip-3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.image-3d {
  animation: flip-3d 4s linear infinite;
  transform-style: preserve-3d;
}

HTML 结构

<div class="scene">
  <img src="example.jpg" class="image-3d" alt="3D 旋转图片">
</div>

注意事项

• 确保动画性能优化，避免过多复杂动画导致页面卡顿。
• 使用 will-change 属性提示浏览器优化动画元素（如 will-change: transform）。
• 测试不同浏览器的兼容性，必要时添加前缀（如 -webkit-）。

通过以上方法，可以灵活地为图片添加各种 CSS 动画效果，提升视觉体验。