css实现banner图由中心点动态放大效果

在日常的网页设计中，为了让网页增加一定的特效以达到交互的目的，我们尝尝会在网页中使用一些动画效果。今天来说说实现banner图由中心点动态放大效果，实现这个效果需要用到css中的动画：animation和关键帧：@keyframes，具体示例如下：

animation 动画

animation-name: ; 动画名字

animation-duration: ; 动画时间

animation-timing-function: ; 动画效果

animation-delay: ; 延迟时间

animation-iteration-count: ; 循环次数 infinite 无数次

animation-fill-mode: ; 最后停留位置

animation-play-state: ;  播放时暂停

animation 后可直接写想要的效果，首先是动画名字

<div class="banner">
  <img src="banner.jpg" alt="Banner Image">
</div>

.banner {
  position: relative;
  width: 100%;
  height: 300px; /* 或者你需要的高度 */
  overflow: hidden;
}
 
.banner img {
  width: 200%; /* 图片初始宽度是父容器的两倍 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* 初始缩放为50% */
  animation: zoom-in 5s infinite alternate ease-in-out;
}
 
@keyframes zoom-in {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    transform: translate(-50%, -50%) scale(1); /* 放大到100% */
  }
}

这段代码中，.banner是包含banner图的容器，img是banner图本身。animation属性定义了名为zoom-in的动画，该动画会使图片从初始的50%缩放到最大的100%，并且是无限循环的，每次动画时长为5秒，动画的放大效果通过ease-in-out缓动函数进行平滑过渡。