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 后可直接写想要的效果，首先是动画名字
|
1
2
3
|
<div class="banner"> <img src="banner.jpg" alt="Banner Image"></div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.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缓动函数进行平滑过渡。
