过度模块

• :hover 不仅在a标签使用，也可以用在其他标签

  <!--过渡动画三要素-->
  <!--多个属性时，用逗号隔开即可实现-->
  div{
  width:100px;
  background-color:red;
  <!--需要执行过渡效果的属性-->
  transition-property:width,background-color;<!--也可以为transform-->
  <!--动画时长-->
  transition-duration:5s,5s;
  }
  div:hover{
  width:300px;
  background-color:blue;
  }
  

• transition-delay 延时执行
• transition-timing-function:ease-in;
  • 过渡动画的运动速度
  • 取值
  • linear 匀速
  • ease 逐渐慢下来
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速

• transition连写
  • 格式 transition:过渡属性 过渡时长 运动速度 延迟时间;
  • 多个属性时用逗号隔开
  • transition:过渡属性 过渡时长 运动速度 延迟时间,过渡属性 过渡时长 运动速度 延迟时间;
  • 后面两个参数可以省略，因为有前面两个属性已经满足过渡的三要素
  • transition:all 0s; 所有属性

2D转换

transfrom

• rotate(45dge)
• translate(0,10px)
• scale(1.5,1),取值相同可省略一个取值
• 综合连写 transform:rotate(45dge) translate(0,10px) scale(1.5,1);
• none 清除形变
  • 注意点:
• 1.如果需要进行多个转换，用空格隔开
• 2.2D的转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平平移

2D转换-形变中心点

• 默认情况下所有元素以自己的"中心点"作为参考来旋转的，我们可以通过形变中心点属性来修改它的参考点
• transform-origin:0px 0px;
  • 参数1:水平方向;
  • 参数2:垂直方向;
  • 注意点:取值(具体像素,百分比,特殊关键字(left,right,top,bottom))

2D转换-旋转轴向

• 默认情况下所有元素都是围绕Z轴旋转,也就是面对我们的那条轴线
• rotate(45deg)等价于rotateZ(45deg)
• rotateX围绕X轴旋转,rotateY围绕Y轴旋转

2D转换-透视属性

• 透视:静大远小
• prespective:500px;
  • 这个属性取值越小，元素看起来越大
• 注意点:
  • 透视属性必须添加到需要呈现近大远小效果元素的父元素(包括爷爷等元素)上面