单词 -html+css笔记2021-04-12

最新推荐文章于 2023-04-08 21:39:06 发布

qq_55438560

最新推荐文章于 2023-04-08 21:39:06 发布

阅读量37

点赞数

本文链接：https://blog.csdn.net/qq_55438560/article/details/115612326

版权

transition:过度
transform:转换
rotate:旋转
translate:位移
scale：缩放
skew:斜切
infinite：无数次
animation:动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style type="text/css">
		    .box{
		    	position: absolute;
		    	top: 50%;
		    	left: 50%;
		    	transform: translate(-50%,-50%);
		    	width: 300px;
		    	height: px;
		    	background-color: pink;
		    	
		    	/*transition:过度*/
		    	transition: all .3s linear;
		    	transform-origin: ;
		    }
		    
			
			/*鼠标放上去:鼠标悬停*/
			.box:hover{
				
				/*transform: 转换;*/
				/*translateX(x): 水平方向位移*/
				/*translateY(y):垂直方向位移*/
				/*translate(x,Y):水平方向位移x，垂直方向位移y*/

				/*transform: translateY(200px);
				transform: translate(1000px,800px);*/
				
				/*deg度     rotate(deg) : 正数(顺时针旋转) /负数（逆时针旋转）*/
				/*transform: skew(45deg); *//* skew(deg)斜切*/
				
				/*大小放大或缩小倍数. 数字*/
				transform: translate(100px,200px) scale(45deg); 
				
			}
			.box{
		    	width: 300px;
		    	height: 200px;
		    	background-color: pink;
		    	transition: transform 5s;
		    	
		    	/*transform-origin:转换中心点    top/bottom/left/right/center*/
		    	transform-origin: top left;
		    }
		    .box:hover{
		    	transform: rotate(-180deg);
		    }
			
		</style>
		
	</head>
	<body>
	<div class="box"></div>
	<div class="box"></div>
	</body>
</html>




动画；
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 1000px;
				height: 500px;
				background-color: red;
				animation: zhangsan 0.3s infinite 3s;
			}
			/*动画*/
			/*1.创建关键*/
			/*@keyframes 动画名称{
				from: 从...开始;
				to: 到...结束
				}*/
				
				/*2.绑定动画*/
				/*animation: 动画名称 动画持续时间*/
						
			
			@keyframes zhangsan{
				from{
					background-color: pink;
				}
				to{
					background-color: deeppink;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>