1. 转换
transform:
<1>2D转换
translate()
rotate()
scale()
skew() 倾斜
matrix()
<2>3D转换
rotateX()
rotateY()
2. 过渡
transition:
transition-property 过渡名称
transition-duration 过渡时间
transition-timing-function 过渡时间去西安
transition-delay 过渡开始时间
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div>效果展示</div>
</body>
</html>
div{
width: 100px;
height: 100px;
background-color: blue;
text-align: center;
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover{
width: 200px;
height: 200px;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
鼠标放在蓝色方块上, 会在2s内完成放大为200px*200px且旋转360度的动作
时间： 2024-10-08 04:39:31