html5css3:过渡transition 2d转换transform translate移动 scale缩放 rotate旋转

最新推荐文章于 2022-10-09 23:33:33 发布

郭胜_自强

最新推荐文章于 2022-10-09 23:33:33 发布

阅读量606

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/GS2016/article/details/79202433

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>体验一下过渡效果</title>
		<style type="text/css">
			div{
				width:100px; height:100px; background:navajowhite;margin:100px auto;
				border-radius: 15px;box-shadow: 3px 3px 3px 3px #FFC0CB;
				transition:all 1s ease-in 0s;
			}
			div:hover{
				width:200px;height:200px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

过渡小例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标经过放大图片并且旋转</title>
		<style type="text/css">
			div{width:220px;height:200px;overflow:hidden;margin:100px auto;
			border-radius:15px;box-shadow: 2px 2px 2px 2px #333333;}
			img{
				transition:all 0.3s ease-in 0s;
			}
			img:hover{
				transform:scale(1.3) rotate(10deg);
			}
		</style>
	</head>
	<body>
		<div><img src="img/ldh.jpg"/></div>
	</body>
</html>