banner 运动放大缩小

2023-10-10 08:21:31 浏览：313 作者：保利尼奥

<div class="bg_yun"><img src="//cdn.myxypt.com/4e404244/23/09/3d6b5ad3d7028c725b3250d1833404efea1a600b.jpg" alt=""></div>.bg_yun {...

<div class="bg_yun">
    <img src="//cdn.myxypt.com/4e404244/23/09/3d6b5ad3d7028c725b3250d1833404efea1a600b.jpg" alt="">
</div>

.bg_yun {
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	bottom: 0
}

.bg_yun img {
	width: 100%;
	height: 100%;
	-o-object-fit: fill;
	object-fit: fill;
	-webkit-animation: scaleUpDown 5s;
	animation: scaleUpDown 5s
}
@keyframes scaleUpDown {
	from {
		-webkit-transform: scale(1.08);
		transform: scale(1.08);
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

上一篇：9414 产品分类切换内容

下一篇：swiper tab切换