动漫效果

最新推荐文章于 2026-04-21 04:58:23 发布

原创最新推荐文章于 2026-04-21 04:58:23 发布 · 162 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

s1 作业

当前文章被收录于：

s1 作业

21 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了CSS3中的变换（translate、rotate、skew、scale）和过渡（transition）属性，通过实例展示了如何使用这些属性实现元素的位移、旋转、倾斜、缩放以及平滑过渡效果，为网页增添动态视觉体验。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a {
				height: 20px;
				width: 40px;
				border: 2px solid black;
				border-radius: 30%;
				background-color: azure;
				margin: 100px auto 0 auto;
				/* 转变形态transform */
				
				/* 偏移translate */
				transform: translateY(0px);
				
				/* 旋转rotate */
				/* 旋转中心点origin */
				transform: rotate(0deg);
				
				/* 倾斜skew */
				transform: skewY(0deg);
				
				/* 放大缩小scale */
				
				
				/* 过度效果transition */
				/* 由慢到快ease-in */
				/* 由快到慢ease-out */
				/* 先加速再减速ease-in-out */
				transition: background-color 3s;
			}
			.a:hover {
				transform: scale(5);
				 background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
	</body>
</html>