2021-04-12

最新推荐文章于 2024-09-14 17:59:56 发布

北路有点堵车*

最新推荐文章于 2024-09-14 17:59:56 发布

阅读量40

点赞数

分类专栏：学习笔记文章标签： css html

本文链接：https://blog.csdn.net/d13368568386/article/details/115616663

版权

学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

动画、鼠标悬停

traansition:过渡
transform：转换
rotate:位移
scale:缩放
skew:斜切
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:pink;
				transition:transform .3s linear;
				/*transform-origin:转换中心点：top/bottom/left/right/center*/
				transform:translate(100px,200px) rotate(45deg);
			/*鼠标放上去：鼠标悬停*/
			}
			.box:hover{
				/*transform:translatey(800px);*/
				/*transform:rotate(45deg);/*deg度 rotate(deg):正数(顺时针旋转)、负数（逆时针旋转）*/
				/*transform:skew(45deg);/*skew(deg)斜切*/
				/*transform:scale(0.5);/*大小放大或缩小倍数。数字*/
				/*transform-origin:转换中心点：top/bottom/left/right/center*/
				transform: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:300px;
				height:200px;
				background-color:pink;
				transition:transform .3s linear;
				/*transform-origin:转换中心点：top/bottom/left/right/center*/
				transform:translate(100px,200px) rotate(45deg);
			/*鼠标放上去：鼠标悬停*/
			}
			.box:hover{
				/*transform:translatey(800px);*/
				/*transform:rotate(45deg);/*deg度 rotate(deg):正数(顺时针旋转)、负数（逆时针旋转）*/
				/*transform:skew(45deg);/*skew(deg)斜切*/
				/*transform:scale(0.5);/*大小放大或缩小倍数。数字*/
				/*transform-origin:转换中心点：top/bottom/left/right/center*/
				transform:rotate(-45deg);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>