css动画之过渡

最新推荐文章于 2022-10-04 19:30:35 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2022-10-04 19:30:35 发布

阅读量172

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/echokkk/article/details/78670771

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

过渡属性为transition，是属于css3的属性，所以在处理不同浏览器的兼容性问题时，记得加上私有前缀。代码如下：

transition表示的是哪些属性执行动画所需要的时间；transform是应用于元素的2D或者3D转换，其中属性值有rotate表示的是旋转多少度，translate表示的是在X和Y轴移动多少，scale表示的是缩放多少倍，skew表示的是需要倾斜的度数。其中动画效果中，还有一个transform-origin属性，表示的是动画执行的基准。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: red;
			transition: all 2s;
		}
		div:hover {
			width: 260px;
			height: 260px;
			transform: rotate(320deg);
		}
	</style>
</head>
<body>
	<div>1</div>
</body>
</html>