前端基础CSS3之过渡模块（重点）

过渡模块

• a标签伪类选择器

  含义：修改a标签不同状态的样式

  状态及格式：

  1.从未被访问过
  a:link{
      属性：属性值；
  }
  2.被访问过
  a:visited{
      属性：属性值；
  }
  3.鼠标长按
  a:active{
      属性：属性值；
  }
  4.鼠标悬停
  a:hover{
      属性：属性值；
  }

  注意：

  1.伪类选择器可以单独出现，也可以一起出现；
  2.如果一起出现，则必须要按照顺序，爱恨原则：love hate
  3.a标签伪类选择器一般写在a标签的后面；
  4.和a标签的盒子相关的属性写在a标签中，如显示模式、宽高、padding和margin
  5.和a标签文字及背景相关的都写在a标签伪类选择其中

• 过渡模块

  过渡效果三要素：必须要有属性发生变化、必须告诉系统哪个属性要发生变化、必须告诉系统过渡时间是多少

  格式：

  a{
      width:100px;
      height:100px;
      /*告诉系统哪些属性要发生变化*/
      transition-property:width,height;
      /*告诉系统过渡时间是多少*/
      transition-duration:5s,5s;
      /*延迟时间是多少*/
      transition-delay:2s,2s;
      /*运动速度->匀速/逐渐变慢/开始慢后面匀速/开始匀速后面慢/开始和后面慢中间匀速*/
      transition-timing-function:liner/ease/ease-in/ease-out/ease-in-out
  }
  a:hover{
      /*有属性发生变化*/
      width:300px;
      height:300px;
  }

  过渡连写格式：

  transtion:过渡属性1 过渡时长1 运动速度1 延迟时间1，过渡属性2 过渡时长2 运动速度2 延迟时间2；
  可以省略后面两个属性
  简写格式->transition:all 过渡时长；

  过渡编写套路：

  1.先编写基本界面，不管过渡；
  2.修改需要修改的属性；
  3.给修改的属性添加过渡效果；