web前端图片拉进拉远效果

最新推荐文章于 2024-06-08 12:52:46 发布

OrdnAry

最新推荐文章于 2024-06-08 12:52:46 发布

阅读量344

点赞数

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/OrdnAry/article/details/107431575

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  		#ck{
			width:600px;
			height:500px;
			border:1px solid red;
			margin:30px auto;
			overflow:hidden;
		}
		#ck>img{
			width:100%;
			height:100%;
/*			transform:scale(1);*/
			transition:all 2s linear;
		}
		#ck:hover>img{
			transform:scale(1.5);
			transition:all 2s linear;
		}
  </style>
 </head>
 <body>
  <div id="ck">
	<img src="img/001.jpg">
  </div>
 </body>
</html>