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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-27

浏览次数：次

返回列表

使用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 结合使用来完成。这种方式无需J*aScript，仅用纯CSS就能创建流畅的动画效果。

1. 基础HTML结构

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

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

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

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

3. 应用动画到图片

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

语鲸

AI智能阅读辅助工具

314 查看详情

.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结合的详细内容，更多请关注其它相关文章！

# 加载 # 网站建设技术技巧视频app # 网站设计推广顾问 # 网页制作与网站建设江西 # 漳州门店推广招聘网站 # 搜索营销推广培训资料 # 山西推广网站建设有哪些 # 天津营销类网站推广公司 # 百度怎么推广一个网站呢 # 优化网站方法和技巧初中 # seo查询站长工具灰色 # 鼠标 # 你可以 # 图片缩放 # 圆角 # 不匹配 # 时长 # 如何在 # 可选 # 设为 # 绑定 # html # java # javascript # css # 透明度变化