[HTML]CSS实现banner图轮播且放大缩小100%居中显示

最新推荐文章于 2023-04-14 14:32:25 发布

ZJTT

最新推荐文章于 2023-04-14 14:32:25 发布

阅读量3.3k

点赞数 10

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/dz1999/article/details/125260825

版权

本文介绍了如何使用CSS实现一个全屏的banner图片轮播效果，图片在轮播过程中能实现放大缩小并保持100%居中显示。通过设置animation属性结合@keyframes定义关键帧，详细解释了每个CSS属性的作用，包括动画名称、时长、效果、延迟、循环次数等。最后展示了实现后的效果图，并表示作者作为技术初学者，欢迎读者提出建议和指正。

摘要由CSDN通过智能技术生成

一、HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纯css实现banner图放大缩小100%居中显示</title>
	</head>
	<body>
		<div class="wrapper">	
			<div class="box">
				<div class="img1"></div>
				<div class="img2"></div>
				<div class="img3"></div>
			</div>
		</div>
	</body>
</html>

二、CSS详细代码以及相关注释：

animation 动画
animation-name: ; 动画名字
animation-duration: ; 动画时间
animation-timing-function: ; 动画效果
animation-delay: ; 延迟时间
animation-iteration-count: ; 循环次数 infinite 无数次
animation-fill-mode: ; 最后停留位置
animation-play-state: ; 播放时暂停
animation 后可直接写想要的效果，首先是动画名字

@keyframes

定义关键帧可以用百分比