如何在CSS中制作图片缩放和透明度变化_transform scale opacity @keyframes结合-css教程-PHP中文网

如何在CSS中制作图片缩放和透明度变化_transform scale opacity @keyframes结合

P粉602998670

发布： 2025-11-27 20:03:06

原创

422人浏览过

使用CSS的@keyframes、transform和opacity可实现图片缩放与透明度动画。1. 创建含图片的容器；2. 用@keyframes定义0%到100%的缩放与透明度变化；3. 将动画绑定至图片，设置时长1.5s、缓动ease-out并保持最终状态forwards；4. 可选:hover触发交互效果，提升视觉表现力。

如何在css中制作图片缩放和透明度变化_transform scale opacity @keyframes结合

想要在CSS中实现图片的缩放和透明度变化动画，可以通过 transform、opacity 和 @keyframes 结合使用来完成。这种方式无需JavaScript，仅用纯CSS就能创建流畅的动画效果。

1. 基础HTML结构

先准备一个包含图片的容器，便于绑定动画样式：

2. 使用 @keyframes 定义动画关键帧

通过 @keyframes 设置动画在不同时间点的状态。比如从缩小且半透明开始，到正常大小和完全不透明结束：

@keyframes scaleAndFade {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

3. 应用动画到图片

将定义好的动画绑定到图片或其容器上，并设置动画时长、缓动函数和播放次数：

立即学习“前端免费学习笔记（深入）”；

Veed AI Voice Generator

Veed推出的AI语音生成器

查看详情

.animated-image img {
  width: 300px;
  height: auto;
  transition: all 0.3s ease;
}

.animated-image img {
  animation: scaleAndFade 1.5s ease-out forwards;
}

scale(0.8) 表示初始缩小为80%
opacity: 0.5 初始半透明
ease-out 让动画结尾更平滑
forwards 确保动画结束后保持最终状态

4. 可选：悬停触发动画

如果希望鼠标悬停时才触发动画，可以使用 :hover：

.animated-image img {
  opacity: 0.5;
  transform: scale(0.8);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.animated-image:hover img {
  transform: scale(1);
  opacity: 1;
}

这种方式更适合交互式效果，比如图库或按钮悬停。

基本上就这些。结合 transform、opacity 和 @keyframes，你可以灵活控制图片的入场、强调或交互动画，视觉表现力强且性能良好。

以上就是如何在CSS中制作图片缩放和透明度变化_transform scale opacity @keyframes结合的详细内容，更多请关注php中文网其它相关文章！