相关代码演⽰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>过渡效果</title>
<style>
/*过渡的核⼼点：能够控制过程，过渡效果需要⼿动触发，动画效果可以进⾏⾃动触发*/
.d1{
height: 200px;
js控制css3动画触发
width: 200px;
background-color: pink;
/*要在元素本⾝添加过渡的属性*/
/*设置过渡属性*/
/*可以⾃由设置过度的属性有哪些，或者给all表⽰所有的属性都有过渡的效果*/ transition-property: height,width;
/*设置过渡的时间*/
/*s表⽰秒,ms表⽰毫秒，设置的时候⼀定要记得加上单位*/
transition-duration: 5s;
/*设置延迟执⾏*/
/*transition-delay: 3s;*/
/*设置运动轨迹*/
transition-timing-function: linear;/*设置匀速完成*/
/*简写*/
/*设置宽度、⾼度、做外边距有过渡效果，过渡时间为4秒，匀速进⾏，等待0.5s*/ transition: width 4s linear .5s,height 4s linear .5s,margin-left 4s linear .5s;
/*transition: all 4s;*/
}
.d1:hover{
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>
1.2 2D变形 Transform属性
基本语法
transform: 属性值;
1.2.1 移动translate(x,y)
translate移动平移的意思
也就是让页⾯元素在过渡效果的时候移动平移
x,y分别代表的是像x轴和y轴平移，这⾥⾯x轴和y轴是根据⽹页的左上⾓对标的x,y值可为负值
translate(x,y)⽔平⽅向和垂直⽅向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅⽔平⽅向移动（X轴移动）
translateY(Y)仅垂直⽅向移动（Y轴移动）
通过translate属性让盒⼦⽔平居中的代码
.d1{
width: 221px;
height: 302px;
overflow: hidden;
transition: transform 1s;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
1.2.2 缩放scale(x,y)
基本语法
transform:scale(x,y);
这⾥⾯的x，y表⽰的是向x，y轴缩放的倍数
可以对元素进⾏⽔平和垂直⽅向的缩放。该语句使⽤scale⽅法使该元素在⽔平⽅向上缩⼩了20%，垂直⽅向上不缩放
scale(X,Y)使元素⽔平⽅向和垂直⽅向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅⽔平⽅向缩放（X轴缩放）
scaleY(y)元素仅垂直⽅向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作⽤使⼀个元素缩⼩；⽽任何⼤于或等于1.01的值，作⽤是让元素放⼤
1.2.3 旋转rotate（deg）
可以对元素进⾏旋转，正值为顺时针，负值为逆时针，单位为deg
基本语法
transform:rotate(45deg)/*表⽰顺时针旋转45度*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。