css3实现图片的变大变小

最新推荐文章于 2024-08-18 20:44:12 发布

p是马甲

最新推荐文章于 2024-08-18 20:44:12 发布

阅读量1.8k

点赞数

原文链接：http://www.cnblogs.com/lxk0301/p/7930237.html

版权

主要是使用 css3的animation，scale等于1是原图大小，大于1是把图片放大，小于1 是把图片缩小。animation-delay用来延迟5秒触发这个动画

<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			.outBox,
			.innerBox {
				width: 100%;
				height: 100%;
			}
			
			.outBox {
				overflow: hidden;
			}
			
			.innerBox {
				width: 100%;
				height: 100%;
				animation: changeBiger 4s linear forwards;
				animation-delay: 5s;
				-webkit-animation-delay: 5s;
				transform: scale(1.08);
			}
			
			@keyframes changeBiger {
				0% {
					transform: scale(1.08);
				}
				100% {
					transform: scale(1);
				}
			}
			
			.innerBox {
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				background-image: url(https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D220/sign=627199341fce36d3bd0484320af13a24/ae51f3deb48f8c54ad2aa0c130292df5e1fe7f66.jpg);
			}
		</style>
	</head>

	<body>
		<div class="outBox">

			<div class="innerBox">
				<!--<img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D220/sign=627199341fce36d3bd0484320af13a24/ae51f3deb48f8c54ad2aa0c130292df5e1fe7f66.jpg" alt="">-->
			</div>
		</div>

	</body>

</html>

转载于:https://www.cnblogs.com/lxk0301/p/7930237.html