2021 4月12

最新推荐文章于 2022-11-07 13:35:41 发布

蒸汽秋葵y

最新推荐文章于 2022-11-07 13:35:41 发布

阅读量60

点赞数

本文链接：https://blog.csdn.net/y850266/article/details/115616711

版权

transition:过渡
transform:转换
rotate:旋转
translate:位移
scale:缩放
skew:斜切
动画持续：4s
0s:red
2s:green
4s:blue

background-color:pink;
width:800px;
transform:rotate(45deg); deg度 rotate(deg):正数(顺时针旋转)/负数(逆时针旋转)
transform:skew(45deg); / / skew(deg)斜切
transform:rotate(-45deg); // 大小放大或缩小倍数,数字

动画
1.创建关键帧
@keyframes 动画名称{
from:{从…开始}
to:{到…结束}
}
2.绑定动画
animation:动画名称动画持续时间重复次数/infinite无数次延迟时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
			<style>
				body{
					width:100vw;
					height:100vh;
					position:relative;
				}
				.box{
					position:absolute;
					top:50%;
					left:50%;
					transform:translate(-50%,-50%);
					width:300px;
					height:200px;
					background-color:skyblue;
					transition:transform .3s linear;
					transform-origin:top left;
				}
				.box:hover{
					/* background-color:pink;
					width:800px; 
					transform:rotate(45deg); deg度 rotate(deg):正数(顺时针旋转)/负数(逆时针旋转) */
					/* transform:skew(45deg); */ /* skew(deg)斜切 */
					/* transform:rotate(-45deg); *//* 大小放大或缩小倍数,数字 */
					transform: translate(100px,200px) rotate(45deg);
				}
				
				
			</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body{
				width:100vw;
				height:100vh;
				position:relative;
			}
			.box{
				position:absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%);
				width:200px;
				height:200px;
				background-color:pink;
				transition:transform 2s linear;
			}
			.box:hover{
				transform:rotate(180deg) scale(2);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width:200px;
				height:300px;
				background-color:skyblue;
				animation:fdb .1s infinite 3s linear;
			}
			/* 动画 */
			/* 1.创建关键帧 */
			/* @keyframes 动画名称{
				from:{从...开始}
				to:{到...结束}
			} */
			/* 2.绑定动画 
			animation:动画名称 动画持续时间 重复次数/infinite无数次 延迟时间*/
			 @keyframes fdb{
				 from{
					 background-color:skyblue;
				 }
				 to{
					 background-color:pink
				 }
			 }
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>