css 图片来回放大缩小 |css基础知识.doc

/* HTML 代码 */
<div class="container">
<img src="image.jpg" alt="图片">
</div>
/* CSS 代码 */
.container {
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
}
img {
position: absolute;
top: calc(50% - 400px/2);
left: calc(50% - 400px/2);
height: 400px;
width: auto;
animation: zoom 10s infinite alternate;
}
@keyframes zoom {
0% {transform: scale(1);}
50% {transform: scale(2);}
100% {transform: scale(1);}
}

首先大家需要在 HTML 中创建一个容器，并在其中放置一个图片。容器需要设置宽度和高度，并使用 overflow: hidden 隐藏溢出部分。图片要使用绝对定位，因为大家需要将其放置在容器中心并居中。

在 CSS 中，大家使用关键帧动画来使图片不断缩放。关键帧定义了三个阶段，分别是开始状态（0%）、中间状态（50%）和结束状态（100%）。在这里，起始状态中，图片的大小为原来的大小（即缩放比例为 1），中间状态将图片缩放为原来的两倍，结束状态将图片缩放回原来的大小。

需要注意的是，大家在容器上使用了相对定位，也就是 position: relative，而图片使用了绝对定位，也就是 position: absolute。这是因为大家想让图片在容器中心居中，所以设置了 top 和 left 为 50%，并使用 calc 计算出具体的偏移值。

通过以上代码，就能实现图片的来回放大缩小的效果了。