• css3的transition允许css的属性值在一定的时间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

    1.过渡简写属性

  • transition:过渡的属性 过渡所需时间 速度效果 延迟时间;

    • 速度效果:
      • 默认值,慢速开始慢速结束 ease
      • 匀速过渡 linear
      • 先慢后快 ease-in
      • 先快后慢 ease-out
      • 由慢变快后变慢 ease-in-out

        2.过渡属性添加的位置

  • transition如果给hover：鼠标移入有过渡,移出没有过渡

  • transition如果给元素本身，鼠标移入移出都有过渡

    3.多个属性设置不同的过渡效果

  • 不同过渡效果用逗号进行分隔

  • transition: width 2s linear 1s,background 1s;

    4.多个属性设置相同的过渡效果

  • 一个元素所有的属性用all来表示

  • transition: all 2s linear 1s; 这个元素所有属性都执行相同的过渡效果

    5.父元素控制后代元素的方法

  • 谁变化过渡加给谁 ，子元素变化，过渡就加给子元素

    1. .father:hover .son1 {
    2. background-color: pink;
    3. }

    6.兄长控制弟弟

  • ~ 代表后面兄弟元素

    • 代表相邻兄弟元素
      1. .box1:hover ~ .box2 {
      2. background-color: orange;
      3. }

      7.课堂案例

      2021-11-13_173713.jpg