HTML第十七次-CSDN博客

本文链接：https://blog.csdn.net/weixin_54989803/article/details/115616967

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
			width: 1600px;
			height: 900px;
			background-color: springgreen;
			/*animation: 动画名称 动漫持续时间 重复次数/infinite无数次;*/
			animation: xiaosi 1ms linfinite 5s infinite; 
			}
			/*动画*/
			/*1.创建关键帧*/
			/*@keyframes 动画名称{
				form{从...开始}
				to{到...结束}
			}*/
			@keyframes xiaosi{
				0%{
					background-color: green;
				}
				50%{
					background-color: #f99c56;
				}
				100%{
					background-color: blue;
				}
			}
		</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:300px;
				height: 200px;
				background-color:paleturquoise ;
				transition: transform .50s linear;
			}
			/*鼠标放上去:鼠标悬停*/
			.box:hover{
				/*background-color: darkmagenta;*/
		/*		/*width: 800px;*/
				/*transform: translate (800px,200px);/*translate(x,y) 位移*/
				/*transform: translateY(400px);*/ /*translateY(Y)y轴方向位移,translateX(X)x轴方向位移,*/
				/*transform: rotate(45deg);*//*deg度  rotate(deg):正数(顺时针旋转) 负数（逆时针）*/
				/*transform: skew(45deg);*/ /*skew(斜切)*/
				transform:translate(100px,200px) rotate(45deg); /*大小放大或缩小倍数。数字*/
				
			}
			.bo{
				width: 300px;
				height: 200px;
				background-color: paleturquoise;
				transition: transfoorm 5s;
				/*transform-origin:转换中心点.top/bottom ;/left/right/center*/
				transform-origin: top left;
			}
			.bo:hover{
				 transform: rotate(-45deg);
			}
		</style>
	</head>
	<body>
	<div class="box"></div>
	<!--<div class="bo"></div>-->
	</body>
</html>
 





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





transition:过渡
transform:转换
rotate:旋转
translate位移
scale:缩放
skew：斜切



网页正中心一个200*200px的盒子，鼠标放上去后在0.2s时间里匀速变换：
变换：放大2倍并旋转360度。


动画持续4s
0s:red;
2s:green;
4s:blue