css 动画

最新推荐文章于 2024-10-02 15:35:50 发布

huihuangdiao

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量60

点赞数

分类专栏：前端技术文章标签： css css3

本文链接：https://blog.csdn.net/huihuangdiao/article/details/119007236

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css动画

演示html内容

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>动画学习</title>
</head>
<style type="text/css">
	html, body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.trans-div {
		width: 200px;
		height: 200px;
		margin: 200px auto;
		background-color: pink;


		/* 动画时间 */
		transition-duration: 3s;
		/* 动画内容 - 当哪些内容变化的时候进行动画变动 */
		/* transition-property: width, background, height; */
		/* 动画变化方式 */
		transition-timing-function: ease;

		/*transition-delay: all;*/
	}

	/* 倾斜 */
	.transform-skew:hover {
		transform: skew(45deg);
	}

	/* 缩放 */
	.transform-salder:hover {
		transform: scale(.5);
	}

	/* 平移 */
	.transform-translate:hover {
		transform: translate(100px, 100px);
	}

	/* 旋转 */
	.transform-rotate:hover {
		transform: rotate(45deg);
		/* 设置动画 中心点 */
		transform-origin: 20px 20px;
	}

	.transform-mul:hover {
		transform: skew(10deg) scale(1.5) translate(150px) rotate(90deg);
	}
</style>
<body>
	<div class="trans-div transform-mul"></div>
</body>
</html>